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;

server/app/data.yml

@@ -64,6 +64,26 @@ defaults:
       code:
         dark: true
         colorize: true
+colors:
+  - red
+  - pink
+  - purple
+  - deep-purple
+  - indigo
+  - blue
+  - light-blue
+  - cyan
+  - teal
+  - green
+  - light-green
+  - lime
+  - yellow
+  - amber
+  - orange
+  - deep-orange
+  - brown
+  - grey
+  - blue-grey
 langs:
   -
     id: en

server/controllers/admin.js

@@ -271,4 +271,26 @@ router.get('/theme', (req, res) => {
   res.render('pages/admin/theme', { adminTab: 'theme' })
 })
 
+router.post('/theme', (req, res) => {
+  if (res.locals.isGuest) {
+    return res.render('error-forbidden')
+  }
+
+  if (!validator.isIn(req.body.primary, appdata.colors)) {
+    return res.status(406).json({ msg: 'Primary color is invalid.' })
+  } else if (!validator.isIn(req.body.alt, appdata.colors)) {
+    return res.status(406).json({ msg: 'Alternate color is invalid.' })
+  } else if (!validator.isIn(req.body.footer, appdata.colors)) {
+    return res.status(406).json({ msg: 'Footer color is invalid.' })
+  }
+
+  appconfig.theme.primary = req.body.primary
+  appconfig.theme.alt = req.body.alt
+  appconfig.theme.footer = req.body.footer
+  appconfig.theme.code.dark = req.body.codedark === 'true'
+  appconfig.theme.code.colorize = req.body.codecolorize === 'true'
+
+  return res.json({ msg: 'OK' })
+})
+
 module.exports = router

server/views/common/footer.pug

@@ -1,4 +1,4 @@
-footer.footer(class=['is-' + appconfig.theme.footer])
+footer.footer(class=['is-' + appconfig.theme.footer], ref='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(class=['is-' + appconfig.theme.primary])
+  nav.nav#header(class=['is-' + appconfig.theme.primary], ref='header')
     .nav-left
       block rootNavLeft
         a.nav-item(href='/')