feat: Color Theme live preview

client/js/app.js

@@ -22,6 +22,7 @@ import 'jquery-sticky'
 // ====================================
 
 import helpers from './helpers'
+import _ from './helpers/lodash'
 
 // ====================================
 // Load Vue Components
@@ -62,7 +63,7 @@ import sourceViewComponent from './pages/source-view.component.js'
 Vue.use(VueResource)
 Vue.use(VueClipboards)
 Vue.use(VueI18Next)
-Vue.use(VueLodash, helpers._)
+Vue.use(VueLodash, _)
 Vue.use(helpers)
 
 // ====================================
@@ -142,6 +143,13 @@ $(() => {
     store,
     i18n,
     el: '#root',
+    methods: {
+      changeTheme(opts) {
+        this.$el.className = `has-stickynav is-primary-${opts.primary} is-alternate-${opts.alt}`
+        this.$refs.header.className = `nav is-${opts.primary}`
+        this.$refs.footer.className = `footer is-${opts.footer}`
+      }
+    },
     mounted() {
       $('a:not(.toc-anchor)').smoothScroll({ speed: 500, offset: -50 })
       $('#header').sticky({ topSpacing: 0 })

client/js/helpers/index.js

@@ -1,7 +1,6 @@
 'use strict'
 
 const helpers = {
-  _: require('./lodash'),
   common: require('./common'),
   form: require('./form'),
   pages: require('./pages')

client/js/helpers/lodash.js

@@ -27,6 +27,7 @@ import reject from 'lodash/reject'
 import slice from 'lodash/slice'
 import split from 'lodash/split'
 import startCase from 'lodash/startCase'
+import startsWith from 'lodash/startsWith'
 import toString from 'lodash/toString'
 import toUpper from 'lodash/toUpper'
 import trim from 'lodash/trim'
@@ -35,7 +36,7 @@ import trim from 'lodash/trim'
 // Build lodash object
 // ====================================
 
-export default {
+module.exports = {
   deburr,
   concat,
   cloneDeep,
@@ -59,6 +60,7 @@ export default {
   slice,
   split,
   startCase,
+  startsWith,
   toString,
   toUpper,
   trim

client/js/pages/admin-theme.component.js

@@ -12,6 +12,17 @@ export default {
       codecolorize: 'true'
     }
   },
+  watch: {
+    primary(val) {
+      this.$root.changeTheme(this.$data)
+    },
+    alt(val) {
+      this.$root.changeTheme(this.$data)
+    },
+    footer(val) {
+      this.$root.changeTheme(this.$data)
+    }
+  },
   methods: {
     saveTheme() {
       let self = this

client/scss/components/footer.scss

@@ -12,6 +12,7 @@
   right: 0;
   bottom: 0;
   left: 0;
+  transition: background-color 1s ease;
 
 	ul {
 		padding: 0;

client/scss/components/nav.scss

@@ -9,6 +9,7 @@
 	box-shadow: 0 2px 3px rgba(mc($primary, '500'), 0.2);
 	z-index: 2;
 	color: #FFF;
+  transition: background-color 1s ease;
 
   /* THEME OVERRIDE - START */
 

client/scss/components/sidebar.scss

@@ -5,6 +5,7 @@
 	width: 250px;
 	max-width: 250px;
 	min-height: calc(100vh - 120px);
+  transition: background-color 1s ease;
 
 	aside {
     padding: 1px 0 15px 0;
@@ -23,6 +24,7 @@
 			margin: 0 0 15px 0;
       text-align: center;
       box-shadow: 0 0 5px rgba(0,0,0,0.3);
+      transition: background-color 1s ease;
 
 			i {
 				margin-right: 5px;