feat: add dark mode support to config page

client/css/github.css

@@ -8,11 +8,30 @@
 :root {
   --color-fg-primary: #000;
   --color-fg-secondary: #333;
+  --color-bg-primary: #fff;
   --color-bg-tertiary: #f6f7f8;
   --color-fg-absent: #cc0000;
   --color-fg-h6: #777;
   --color-border-h1: #ddd;
   --color-border-h2: #eee;
+  --color-border-primary: #d1d5da;
+  --color-text-primary: #24292e;
+  --color-link: #0366d6;
+}
+
+/* Dark mode */
+[data-theme="dark"] {
+  --color-fg-primary: #c9d1d9;
+  --color-fg-secondary: #b1bac4;
+  --color-bg-primary: #0d1117;
+  --color-bg-tertiary: #161b22;
+  --color-fg-absent: #f85149;
+  --color-fg-h6: #8b949e;
+  --color-border-h1: #30363d;
+  --color-border-h2: #21262d;
+  --color-border-primary: #30363d;
+  --color-text-primary: #c9d1d9;
+  --color-link: #58a6ff;
 }
 
 .markdown-body {
@@ -233,7 +252,7 @@
 
 .markdown-body table tr {
   border-top: 1px solid var(--color-border-h1);
-  background-color: #fff;
+  background-color: var(--color-bg-primary, #fff);
 }
 
 .markdown-body table th {

client/css/screen.css

@@ -9,18 +9,20 @@ html {
 body {
   max-width: 900px;
   margin: 0 auto;
-  background: #fff;
+  background: var(--color-bg-primary, #fff);
+  color: var(--color-text-primary, #24292e);
   padding: 1em 4em;
-  border-right: 1px solid #d1d5da;
-  border-left: 1px solid #d1d5da;
+  border-right: 1px solid var(--color-border-primary, #d1d5da);
+  border-left: 1px solid var(--color-border-primary, #d1d5da);
   min-height: 100vh;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 img {
   max-width: 100%;
 }
 a,
 a:active {
-  color: #0366d6;
+  color: var(--color-link, #0366d6);
   text-decoration: none;
 }
 a[name] {
@@ -47,13 +49,13 @@ a.top {
 }
 
 kbd {
-  background-color: #eee;
+  background-color: var(--color-bg-tertiary, #eee);
   border-radius: 3px;
-  border: 1px solid #b4b4b4;
+  border: 1px solid var(--color-border-h1, #b4b4b4);
   box-shadow:
     0 1px 1px rgba(0, 0, 0, 0.2),
     0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
-  color: #333;
+  color: var(--color-fg-secondary, #333);
   display: inline-block;
   font-size: 0.85em;
   font-weight: 700;
@@ -62,6 +64,12 @@ kbd {
   white-space: nowrap;
 }
 
+[data-theme="dark"] kbd {
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.4),
+    0 2px 0 0 rgba(255, 255, 255, 0.1) inset;
+}
+
 x-error {
   background: none repeat scroll 0 0 #f00;
   color: #fff;

config.js

@@ -30,6 +30,7 @@ const config = {
   },
   confluencer: false, // disable confluencer by default
   confluenceHtml: false, // use confluence html if enabled
+  darkMode: false, // disable dark mode by default
   /// add `markdown-it` plugins
   markdownItPlugins: function (parser) {
     return parser

lib/markd.js

@@ -53,7 +53,8 @@ async function markdown(title, data, config) {
   return _template(tmpl)({
     markdown: _data,
     title,
-    highlight: config.template.highlight
+    highlight: config.template.highlight,
+    darkMode: config.darkMode
   })
 }
 

lib/pages/config.md

@@ -23,13 +23,16 @@ input:not([type=checkbox]) {
   padding: .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
-  color: #495057;
-  background-color: #fff;
+  color: var(--color-fg-secondary, #495057);
+  background-color: var(--color-bg-primary, #fff);
   background-clip: padding-box;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--color-border-h1, #ced4da);
   border-radius: .25rem;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
+label {
+  color: var(--color-fg-primary, inherit);
+}
 </style>
 
 <a href="/">home</a>
@@ -53,6 +56,10 @@ input:not([type=checkbox]) {
 <label for="confluenceHtml">Display Confluence html</label>
 <br>
 
+<input id="darkMode" name="darkMode" type="checkbox" <%= darkMode ? 'checked' : '' %>>
+<label for="darkMode">Dark mode</label>
+<br>
+
 <label for="style">highlight.js style</label>
 <br>
 <select id="styles" name="highlight"><% for (var style of styles) { %><option value="<%- style %>" <%= template.highlight == style ? 'selected' : '' %>><%- style %></option><% } %></select>

lib/pages/template.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html<%= darkMode ? ' data-theme="dark"' : '' %>>
   <head>
     <meta charset="utf-8">
     <meta name="google" content="notranslate">
+    <meta name="color-scheme" content="<%= darkMode ? 'dark' : 'light' %>">
     <title><%= title %></title>
     <link rel="stylesheet" media="all" href="/static/index.css">
     <link rel="stylesheet" media="all" href="/static/highlight/<%= highlight %>.css">

lib/renderConfig.js

@@ -37,13 +37,15 @@ function renderConfig({ highlightStyles }) {
 function updateConfig(appConfig) {
   return (req, res) => {
     const obj = {}
-    const { port, filter, confluenceHtml, confluencer, highlight } = req.body
+    const { port, filter, confluenceHtml, confluencer, highlight, darkMode } =
+      req.body
     if (port && port >= 1000 && port <= 65535) {
       obj.port = parseInt(port)
     }
     obj.filter = filter === 'on'
     obj.confluencer = confluencer === 'on'
     obj.confluenceHtml = confluenceHtml === 'on'
+    obj.darkMode = darkMode === 'on'
     if (highlight) {
       obj.template = {
         highlight