feat: Color Themes - Header + Sidebar + Footer support

client/js/pages/source-view.component.js

@@ -1,7 +1,5 @@
 'use strict'
 
-/* global siteRoot */
-
 export default {
   name: 'source-view',
   data() {
@@ -9,7 +7,7 @@ export default {
   },
   mounted() {
     let self = this
-    FuseBox.import(siteRoot + '/js/ace/ace.js', (ace) => {
+    FuseBox.import('/js/ace/ace.js', (ace) => {
       let scEditor = ace.edit('source-display')
       scEditor.setTheme('ace/theme/dawn')
       scEditor.getSession().setMode('ace/mode/markdown')

client/scss/components/footer.scss

@@ -27,4 +27,11 @@
 
 	}
 
+  @each $color, $colorvalue in $material-colors {
+		&.is-#{$color} {
+      background-color: mc($color,'50');
+      color: mc($color,'500');
+    }
+  }
+
 }

client/scss/components/nav.scss

@@ -10,25 +10,37 @@
 	z-index: 2;
 	color: #FFF;
 
+  /* THEME OVERRIDE - START */
+
 	@each $color, $colorvalue in $material-colors {
 		&.is-#{$color} {
 			background-color: mc($color, '500');
 			box-shadow: 0 2px 3px rgba(mc($color, '500'), 0.2);
 
+      .nav-item a, a.nav-item {
+        color: mc($color, '50');
+
+        &:hover {
+          color: mc($color, '200');
+        }
+
+      }
+
+      h1:hover {
+        color: mc($color, '100');
+      }
+
 			.nav-item {
 
 				.button {
-					border: 1px solid mc($color, '900');
 					background-color: mc($color, '800');
 
 					&.is-outlined {
 						background-color: mc($color, '600');
-						border-color: mc($color, '800');
 						color: mc($color, '100');
 					}
 
 					&:hover {
-						border-color: mc($color, '900');
 						background-color: mc($color, '900');
 					}
 
@@ -36,9 +48,31 @@
 
 			}
 
+      .control {
+
+        input[type=text] {
+          background-color: mc($color, '800');
+          border-color: mc($color, '400');
+          color: mc($color, '50');
+
+          &:focus {
+            border-color: mc($color, '200');
+            box-shadow: inset 0 0 5px 0 rgba(mc($color, '900'), 0.5);
           }
+
+          @include placeholder {
+            color: mc($color, '200');
           }
 
+        }
+
+      }
+
+		}
+	}
+
+  /* THEME OVERRIDE - END */
+
 }
 
 .nav-left {
@@ -117,7 +151,7 @@
 		}
 
 		&:hover {
-			color: mc('indigo', '100');
+			color: mc($primary, '100');
 		}
 	}
 

client/scss/components/sidebar.scss

@@ -135,3 +135,54 @@
   }
 
 }
+
+/* THEME OVERRIDE - START */
+
+@each $color, $colorvalue in $material-colors {
+  .is-alternate-#{$color} .sidebar {
+    background-color: mc($color, '900');
+	  color: mc($color, '50');
+
+    aside {
+      .sidebar-label {
+        color: mc($color, '300');
+        background-color: mc($color, '800');
+      }
+      .sidebar-menu {
+        li {
+          a {
+            color: mc($color, '50');
+
+            &.is-active {
+              border-left-color: mc($color, '500');
+              color: mc($color, '300');
+
+              .is-small {
+                color: mc($color, '500');
+              }
+            }
+
+            &:hover {
+              color: mc($color, '400');
+            }
+
+            i {
+              color: mc($color, '300');
+            }
+          }
+          > ul {
+            border-top-color: lighten(mc($color, '900'), 3%);
+            border-bottom-color: lighten(mc($color, '900'), 2%);
+            background-color: darken(mc($color, '900'), 2%);
+
+            li a {
+              color: mc($color, '100');
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* THEME OVERRIDE - END */

server/app/data.yml

@@ -57,6 +57,13 @@ defaults:
       papertrail: false
       rollbar: false
       sentry: false
+    theme:
+      primary: indigo
+      alt: blue-grey
+      footer: blue-grey
+      code:
+        dark: true
+        colorize: true
 langs:
   -
     id: en

server/views/common/footer.pug

@@ -1,4 +1,4 @@
-footer.footer
+footer.footer(class=['is-' + appconfig.theme.footer])
   span
     = t('footer.poweredby') + ' '
     a(href='https://github.com/Requarks/wiki') Wiki.js

server/views/common/header.pug

@@ -1,6 +1,6 @@
 
 #header-container
-  nav.nav#header
+  nav.nav#header(class=['is-' + appconfig.theme.primary])
     .nav-left
       block rootNavLeft
         a.nav-item(href='/')

server/views/layout.pug

@@ -29,7 +29,7 @@ html
     block head
 
   body
-    #root.has-stickynav
+    #root.has-stickynav(class=['is-primary-' + appconfig.theme.primary, 'is-alternate-' + appconfig.theme.alt])
       include ./common/header.pug
       alert
       main