Add basic theme chooser

src/app.js

@@ -9,6 +9,7 @@ const open = require('open')
 const koaBody = require('koa-body')
 const debug = require('debug')('oasis')
 const ssbRef = require('ssb-ref')
+const requireStyle = require('require-style')
 
 const author = require('./pages/author')
 const hashtag = require('./pages/hashtag')
@@ -18,7 +19,6 @@ const raw = require('./pages/raw')
 const thread = require('./pages/thread')
 const like = require('./pages/like')
 const status = require('./pages/status')
-const highlight = require('./pages/highlight')
 const mentions = require('./pages/mentions')
 const reply = require('./pages/reply')
 const replyAll = require('./pages/reply-all')
@@ -79,8 +79,16 @@ module.exports = (config) => {
     })
     .get('/highlight/:style', (ctx) => {
       const { style } = ctx.params
+      const filePath = `highlight.js/styles/${style}`
+
       ctx.type = 'text/css'
-      ctx.body = highlight(style)
+      ctx.body = requireStyle(filePath)
+    })
+    .get('/theme.css', (ctx) => {
+      const defaultTheme = 'light'
+      const theme = ctx.cookies.get('theme') || defaultTheme
+      debug('current theme: %s', theme)
+      ctx.redirect(`/assets/${theme}.css`)
     })
     .get('/profile/', async (ctx) => {
       ctx.body = await profile()
@@ -147,15 +155,23 @@ module.exports = (config) => {
 
       const voteValue = Number(ctx.request.body.voteValue)
 
-      const referer = new URL(ctx.request.header.referer)
       const encoded = {
         message: encodeURIComponent(message)
       }
 
+      const referer = new URL(ctx.request.header.referer)
       referer.hash = `centered-footer-${encoded.message}`
+
       ctx.body = await like({ messageKey, voteValue })
       ctx.redirect(referer)
     })
+    .post('/theme.css', koaBody(), async (ctx) => {
+      const theme = String(ctx.request.body.theme)
+      debug('setting theme: %s', theme)
+      ctx.cookies.set('theme', theme)
+      const referer = new URL(ctx.request.header.referer)
+      ctx.redirect(referer)
+    })
 
   app.use(router.routes())
 

src/assets/dark.css

@@ -0,0 +1,17 @@
+:root {
+  --thin-stroke: 1px;
+  --medium-stroke: 3px;
+  --heavy-stroke: 6px;
+  --common-radius: var(--thin-stroke);
+  --blue: hsl(240, 50%, 50%);
+  --highlight-shadow: hsl(240, 66%, 25%);
+  --highlight: hsl(240, 88%, 33%);
+  --almost-white: hsl(240, 12.5%, 1.6%);
+  --off-white: hsl(240, 12%, 25%);
+  --discreet: hsl(240, 12%, 25%);
+  --primary: hsl(240, 8.3%, 66%);
+  --red: hsl(330, 75%, 50%);
+  --secondary: hsl(240, 8%, 62%);
+  --background: var(--almost-white);
+  --heavy: hsl(240, 12.5%, 75%);
+}

src/assets/light.css

@@ -0,0 +1,17 @@
+:root {
+  --thin-stroke: 1px;
+  --medium-stroke: 3px;
+  --heavy-stroke: 6px;
+  --common-radius: var(--thin-stroke);
+  --blue: hsl(240, 75%, 50%);
+  --highlight-shadow: hsl(240, 66%, 92%);
+  --highlight: hsl(240, 88%, 88%);
+  --almost-white: hsl(240, 12.5%, 98.4%);
+  --off-white: hsl(240, 12%, 92%);
+  --discreet: hsl(240, 12%, 96%);
+  --primary: hsl(240, 17%, 17%);
+  --red: hsl(330, 75%, 50%);
+  --secondary: hsl(240, 8%, 38%);
+  --background: var(--almost-white);
+  --heavy: black;
+}

src/assets/solarized-light.css

@@ -0,0 +1,17 @@
+:root {
+  --thin-stroke: 1px;
+  --medium-stroke: 3px;
+  --heavy-stroke: 6px;
+  --common-radius: var(--thin-stroke);
+  --blue: #268bd2;
+  --highlight: #6c71c4;
+  --highlight-shadow: rgba(108, 113, 196, 0.33);
+  --almost-white: #fdf6e3;
+  --off-white: #eee8d5;
+  --discreet: #eee8d5;
+  --primary: #657b83;
+  --red: #dc322f;
+  --secondary: var(--primary);
+  --background: var(--almost-white);
+  --heavy: var(--primary);
+}

src/assets/style.css

@@ -1,51 +1,3 @@
-:root {
-  --thin-stroke: 1px;
-  --medium-stroke: 3px;
-  --heavy-stroke: 6px;
-  --common-radius: var(--thin-stroke);
-
-  /* solarized light
-  --blue: #268bd2;
-  --highlight: #6c71c4;
-  --highlight-shadow: rgba(108, 113, 196, 0.33);
-  --almost-white: #fdf6e3;
-  --off-white: #eee8d5;
-  --discreet: hsl(240, 12%, 96%);
-  --primary: #657b83;
-  --red: #dc322f;
-  --secondary: var(--primary);
-  --background: var(--almost-white);
-  --heavy: black;
-  */
-
-  /* light mode */
-  --blue: hsl(240, 75%, 50%);
-  --highlight-shadow: hsl(240, 66%, 92%);
-  --highlight: hsl(240, 88%, 88%);
-  --almost-white: hsl(240, 12.5%, 98.4%);
-  --off-white: hsl(240, 12%, 92%);
-  --discreet: hsl(240, 12%, 96%);
-  --primary: hsl(240, 17%, 17%);
-  --red: hsl(330, 75%, 50%);
-  --secondary: hsl(240, 8%, 38%);
-  --background: var(--almost-white);
-  --heavy: black;
-
-  /* dark mode
-  --blue: hsl(240, 50%, 50%);
-  --highlight-shadow: hsl(240, 66%, 25%);
-  --highlight: hsl(240, 88%, 33%);
-  --almost-white: hsl(240, 12.5%, 1.6%);
-  --off-white: hsl(240, 12%, 12.5%);
-  --discreet: hsl(240, 12%, 4%);
-  --primary: hsl(240, 8.3%, 66%);
-  --red: hsl(330, 75%, 50%);
-  --secondary: hsl(240, 8%, 62%);
-  --background: var(--almost-white);
-  --heavy: hsl(240, 12.5%, 75%);
-  */
-}
-
 html {
   display: flex;
   font-family:
@@ -305,6 +257,13 @@ progress {
   width: 100%;
 }
 
+progress::-moz-progress-bar,
+progress::-webkit-progress-value,
+progress {
+  background: var(--blue);
+  border-color: var(--blue);
+}
+
 textarea {
   background-color: var(--background);
   box-sizing: border-box;

src/pages/highlight.js

@@ -1,8 +0,0 @@
-'use strict'
-
-const requireStyle = require('require-style')
-
-module.exports = function stylePage (style) {
-  const filePath = `highlight.js/styles/${style}`
-  return requireStyle(filePath)
-}

src/pages/views/components/template.js

@@ -24,6 +24,7 @@ module.exports = (...elements) => {
     html({ lang: 'en' },
       head(
         title('🏝️  Oasis'),
+        link({ rel: 'stylesheet', href: '/theme.css' }),
         link({ rel: 'stylesheet', href: '/assets/style.css' }),
         link({ rel: 'stylesheet', href: '/highlight/github.css' }),
         meta({

src/pages/views/status.js

@@ -2,14 +2,18 @@
 
 const highlightJs = require('highlight.js')
 const {
+  button,
+  form,
   h1,
   h2,
   h3,
   label,
   li,
+  option,
   pre,
   progress,
   section,
+  select,
   ul
 } = require('hyperaxe')
 const template = require('./components/template')
@@ -35,6 +39,17 @@ module.exports = ({ status }) => {
 
   return template(
     section({ class: 'message' },
+      h1('Theme'),
+      form({ action: '/theme.css', method: 'post' },
+        select({ name: 'theme' },
+          option({ value: 'light' }, 'light'),
+          option({ value: 'dark' }, 'dark'),
+          option({ value: 'solarized-light' }, 'solarized light')
+        ),
+        button({
+          type: 'submit'
+        }, 'set theme'
+        )),
       h1('Status'),
       h2('Indexes'),
       progressElements,