feat: Color Theme live preview

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='/')