dark theme support

22 files changed, 624 insertions, 233 deletions

diff --git a/htdocs/img/enter.svg b/htdocs/img/enter.svg
deleted file mode 100644
index 6fe49ed..0000000
--- a/htdocs/img/enter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="15" height="9.474"><path d="M0 4.737l4.737 4.737 1.105-1.106L3 5.526h12V.79h-1.579v3.158H3l2.842-2.842L4.737 0z"/></svg>
diff --git a/htdocs/js/common.js b/htdocs/js/common.js
index 4e4199c..959b672 100644
--- a/htdocs/js/common.js
+++ b/htdocs/js/common.js
@@ -14,6 +14,39 @@ if (!String.prototype.endsWith) {
     };
 }
 
+if (!Object.assign) {
+    Object.defineProperty(Object, 'assign', {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function(target, firstSource) {
+            'use strict';
+            if (target === undefined || target === null) {
+                throw new TypeError('Cannot convert first argument to object');
+            }
+
+            var to = Object(target);
+            for (var i = 1; i < arguments.length; i++) {
+                var nextSource = arguments[i];
+                if (nextSource === undefined || nextSource === null) {
+                    continue;
+                }
+
+                var keysArray = Object.keys(Object(nextSource));
+                for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+                    var nextKey = keysArray[nextIndex];
+                    var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+                    if (desc !== undefined && desc.enumerable) {
+                        to[nextKey] = nextSource[nextKey];
+                    }
+                }
+            }
+            return to;
+        }
+    });
+}
+
+
 //
 // AJAX
 //
@@ -87,7 +120,7 @@ if (!String.prototype.endsWith) {
                 break;
         }
 
-        opts = extend({}, defaultOpts, opts);
+        opts = Object.assign({}, defaultOpts, opts);
 
         var xhr = createXMLHttpRequest();
         xhr.open(method, url);
@@ -244,11 +277,11 @@ function setCookie(name, value, days) {
         date.setTime(date.getTime() + (days*24*60*60*1000));
         expires = "; expires=" + date.toUTCString();
     }
-    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+    document.cookie = name + "=" + (value || "") + expires + "; domain=" + window.appConfig.cookieHost + "; path=/";
 }
 
 function unsetCookie(name) {
-    document.cookie = name+'=; Max-Age=-99999999;';
+    document.cookie = name + '=; Max-Age=-99999999; domain=' + window.appConfig.cookieHost + "; path=/";
 }
 
 function getCookie(name) {
@@ -312,6 +345,34 @@ function escape(str) {
     return pre.innerHTML;
 }
 
+function parseUrl(uri) {
+    var parser = document.createElement('a');
+    parser.href = uri;
+
+    return {
+        protocol: parser.protocol, // => "http:"
+        host: parser.host,         // => "example.com:3000"
+        hostname: parser.hostname, // => "example.com"
+        port: parser.port,         // => "3000"
+        pathname: parser.pathname, // => "/pathname/"
+        hash: parser.hash,         // => "#hash"
+        search: parser.search,     // => "?search=test"
+        origin: parser.origin,     // => "http://example.com:3000"
+        path: (parser.pathname || '') + (parser.search || '')
+    }
+}
+
+function once(fn, context) {
+    var result;
+    return function() {
+        if (fn) {
+            result = fn.apply(context || this, arguments);
+            fn = null;
+        }
+        return result;
+    };
+}
+
 //
 //
 
@@ -390,3 +451,229 @@ window.__lang = {};
         unsetCookie('is_retina');
     }
 })();
+
+var StaticManager = {
+    loadedStyles: [],
+    versions: {},
+
+    setStyles: function(list, versions) {
+        this.loadedStyles = list;
+        this.versions = versions;
+    },
+
+    loadStyle: function(name, theme, callback) {
+        var url;
+        if (!window.appConfig.devMode) {
+            var filename = name + (theme === 'dark' ? '_dark' : '') + '.css';
+            url = '/css/'+filename+'?'+this.versions[filename];
+        } else {
+            url = '/sass.php?name='+name+'&theme='+theme;
+        }
+
+        var el = document.createElement('link');
+        el.onerror = callback
+        el.onload = callback
+        el.setAttribute('rel', 'stylesheet');
+        el.setAttribute('type', 'text/css');
+        el.setAttribute('id', 'style_'+name+'_dark');
+        el.setAttribute('href', url);
+
+        document.getElementsByTagName('head')[0].appendChild(el);
+    }
+};
+
+var ThemeSwitcher = (function() {
+    /**
+     * @type {string[]}
+     */
+    var modes = ['auto', 'dark', 'light'];
+
+    /**
+     * @type {number}
+     */
+    var currentModeIndex = -1;
+
+    /**
+     * @type {boolean|null}
+     */
+    var systemState = null;
+
+    /**
+     * @returns {boolean}
+     */
+    function isSystemModeSupported() {
+        try {
+            // crashes on:
+            // Mozilla/5.0 (Windows NT 6.2; ARM; Trident/7.0; Touch; rv:11.0; WPDesktop; Lumia 630 Dual SIM) like Gecko
+            // Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1
+            // Mozilla/5.0 (iPad; CPU OS 12_5_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1
+            //
+            // error examples:
+            // - window.matchMedia("(prefers-color-scheme: dark)").addEventListener is not a function. (In 'window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",this.onSystemSettingChange.bind(this))', 'window.matchMedia("(prefers-color-scheme: dark)").addEventListener' is undefined)
+            // - Object [object MediaQueryList] has no method 'addEventListener'
+            return !!window['matchMedia']
+                && typeof window.matchMedia("(prefers-color-scheme: dark)").addEventListener === 'function';
+        } catch (e) {
+            return false
+        }
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    function isDarkModeApplied() {
+        var st = StaticManager.loadedStyles;
+        for (var i = 0; i < st.length; i++) {
+            var name = st[i];
+            if (ge('style_'+name+'_dark'))
+                return true;
+        }
+        return false;
+    }
+
+    /**
+     * @returns {string}
+     */
+    function getSavedMode() {
+        var val = getCookie('theme');
+        if (!val)
+            return modes[0];
+        if (modes.indexOf(val) === -1) {
+            console.error('[ThemeSwitcher getSavedMode] invalid cookie value')
+            unsetCookie('theme')
+            return modes[0]
+        }
+        return val
+    }
+
+    /**
+     * @param {boolean} dark
+     */
+    function changeTheme(dark) {
+        addClass(document.body, 'theme-changing');
+
+        var onDone = function() {
+            window.requestAnimationFrame(function() {
+                removeClass(document.body, 'theme-changing');
+            })
+        };
+
+        window.requestAnimationFrame(function() {
+            if (dark)
+                enableDark(onDone);
+            else
+                disableDark(onDone);
+        })
+    }
+
+    /**
+     * @param {function} callback
+     */
+    function enableDark(callback) {
+        var names = [];
+        StaticManager.loadedStyles.forEach(function(name) {
+            var el = ge('style_'+name+'_dark');
+            if (el)
+                return;
+            names.push(name);
+        });
+
+        var left = names.length;
+        names.forEach(function(name) {
+            StaticManager.loadStyle(name, 'dark', once(function(e) {
+                left--;
+                if (left === 0)
+                    callback();
+            }));
+        })
+    }
+
+    /**
+     * @param {function} callback
+     */
+    function disableDark(callback) {
+        StaticManager.loadedStyles.forEach(function(name) {
+            var el = ge('style_'+name+'_dark');
+            if (el)
+                el.remove();
+        })
+        callback();
+    }
+
+    /**
+     * @param {string} mode
+     */
+    function setLabel(mode) {
+        var labelEl = ge('theme-switcher-label');
+        labelEl.innerHTML = escape(lang('theme_'+mode));
+    }
+
+    return {
+        init: function() {
+            var cur = getSavedMode();
+            currentModeIndex = modes.indexOf(cur);
+
+            var systemSupported = isSystemModeSupported();
+            if (!systemSupported) {
+                if (currentModeIndex === 0) {
+                    modes.shift(); // remove 'auto' from the list
+                    currentModeIndex = 1; // set to 'light'
+                    if (isDarkModeApplied())
+                        disableDark();
+                }
+            } else {
+                /**
+                 * @param {boolean} dark
+                 */
+                var onSystemChange = function(dark) {
+                    var prevSystemState = systemState;
+                    systemState = dark;
+
+                    if (modes[currentModeIndex] !== 'auto')
+                        return;
+
+                    if (systemState !== prevSystemState)
+                        changeTheme(systemState);
+                };
+
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+                    onSystemChange(e.matches === true)
+                });
+
+                onSystemChange(window.matchMedia('(prefers-color-scheme: dark)').matches === true);
+            }
+
+            setLabel(modes[currentModeIndex]);
+        },
+
+        next: function(e) {
+            if (hasClass(document.body, 'theme-changing')) {
+                console.log('next: theme changing is in progress, ignoring...')
+                return;
+            }
+
+            currentModeIndex = (currentModeIndex + 1) % modes.length;
+            switch (modes[currentModeIndex]) {
+                case 'auto':
+                    if (systemState !== null)
+                        changeTheme(systemState);
+                    break;
+
+                case 'light':
+                    if (isDarkModeApplied())
+                        changeTheme(false);
+                    break;
+
+                case 'dark':
+                    if (!isDarkModeApplied())
+                        changeTheme(true);
+                    break;
+            }
+
+            setLabel(modes[currentModeIndex]);
+            setCookie('theme', modes[currentModeIndex]);
+
+            return cancelEvent(e);
+        }
+    };
+})();
\ No newline at end of file
diff --git a/htdocs/sass.php b/htdocs/sass.php
index eb24962..186b706 100644
--- a/htdocs/sass.php
+++ b/htdocs/sass.php
@@ -4,7 +4,14 @@ require __DIR__.'/../init.php';
 global $config;
 
 $name = $_REQUEST['name'] ?? '';
-if (!$config['is_dev'] || !$name || !file_exists($path = ROOT.'/htdocs/scss/'.$name.'.scss')) {
+$theme = $_REQUEST['theme'] ?? '';
+
+if ($theme != 'light' && $theme != 'dark') {
+    http_response_code(403);
+    exit;
+}
+
+if (!$config['is_dev'] || !$name || !file_exists($path = ROOT.'/htdocs/scss/entries/'.$name.'/'.$theme.'.scss')) {
     // logError(__FILE__.': access denied');
     http_response_code(403);
     exit;
diff --git a/htdocs/scss/blog.scss b/htdocs/scss/app/blog.scss
index 7641683..53ec7e4 100644
--- a/htdocs/scss/blog.scss
+++ b/htdocs/scss/app/blog.scss
@@ -1,4 +1,4 @@
-@import 'vars';
+@import '../vars';
 
 .blog-write-link-wrap {
   margin-bottom: $base-padding;
@@ -81,7 +81,7 @@
   margin-bottom: 2px;
 }
 .blog-upload-item-info {
-  color: #888;
+  color: $grey;
   font-size: $fs - 2px;
 }
 .blog-upload-item-note {
@@ -102,7 +102,7 @@
 }
 
 .blog-post-date {
-  color: #888;
+  color: $grey;
   margin-top: 5px;
   font-size: $fs - 1px;
   > a {
@@ -168,7 +168,7 @@
     background-color: $code-block-bg;
 
     span.term-prompt {
-      color: #999;
+      color: $light-grey;
       @include user-select(none);
     }
   }
@@ -177,7 +177,7 @@
     border-left: 3px #e0e0e0 solid;
     margin-left: 0;
     padding: 5px 0 5px 12px;
-    color: #888;
+    color: $grey;
   }
 
   table.table-100 {
@@ -266,7 +266,7 @@
 .blog-post-comments {
   margin-top: $base-padding;
   padding: 12px 15px;
-  border: 1px #e0e0e0 solid;
+  border: 1px $border-color solid;
   @include radius(3px);
 }
 .blog-post-comments img {
@@ -317,7 +317,7 @@ td.blog-item-date-cell {
   padding-right: 10px;
 }
 .blog-item-date {
-  color: #777;
+  color: $grey;
   //text-transform: lowercase;
 }
 td.blog-item-title-cell {
@@ -344,6 +344,8 @@ td.blog-item-title-cell {
     padding-top: 0;
   }
 }
+
+/*
 a.blog-item-view-all-link {
   display: inline-block;
   padding: 4px 17px;
@@ -356,7 +358,7 @@ a.blog-item-view-all-link:hover {
   text-decoration: none;
   background-color: #ededed;
 }
-
+*/
 
 .blog-tags {
   float: right;
@@ -374,7 +376,7 @@ a.blog-item-view-all-link:hover {
   font-size: $fs - 1px;
 }
 .blog-tag-item > a {
-  color: #222;
+  color: $fg;
 }
 .blog-tag-item-count {
   color: #aaa;
diff --git a/htdocs/scss/common.scss b/htdocs/scss/app/common.scss
index 644a080..b9c5959 100644
--- a/htdocs/scss/common.scss
+++ b/htdocs/scss/app/common.scss
@@ -1,4 +1,4 @@
-@import "vars";
+@import "../vars";
 
 .clearfix:after {
   content: ".";
@@ -13,7 +13,7 @@ html, body {
   padding: 0;
   margin: 0;
   border: 0;
-  //background-color: $bg;
+  background-color: $bg;
   color: $fg;
   height: 100%;
   min-height: 100%;
@@ -35,13 +35,15 @@ body.full-width .base-width {
   margin-right: auto;
 }
 
-input[type="text"], textarea {
+input[type="text"],
+input[type="password"],
+textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   box-sizing: border-box;
   border: 1px $input-border solid;
-  border-radius: 0px;
+  border-radius: 0;
   background-color: $input-bg;
   color: $fg;
   font-family: $ff;
@@ -49,14 +51,16 @@ input[type="text"], textarea {
   padding: 6px;
   outline: none;
   @include radius(3px);
+
+  &:focus {
+    border-color: $input-border-focused;
+  }
 }
+
 textarea {
   resize: vertical;
 }
-input[type="text"]:focus,
-textarea:focus {
-  border-color: $input-border-focused;
-}
+
 //input[type="checkbox"] {
 //  margin-left: 0;
 //}
@@ -110,137 +114,6 @@ p, p code {
   padding: $base-padding 0;
 }
 
-.head {
-  padding: 0 $side-padding;
-}
-.head-inner {
-  //padding: 13px 0;
-  position: relative;
-  border-bottom: 2px $border-color solid;
-}
-.head-logo {
-  padding: 4px 0;
-  font-family: $ffMono;
-  font-size: 15px;
-  display: inline-block;
-  position: absolute;
-  left: 0;
-  background-color: transparent;
-  @include transition(background-color, 0.03s);
-}
-.head-logo {
-  padding: 16px 0;
-  background-color: #fff;
-}
-.head-logo:after {
-  content: '';
-  display: block;
-  width: 40px;
-  position: absolute;
-  right: -40px;
-  top: 0;
-  bottom: 0;
-  border-left: 8px #fff solid;
-  box-sizing: border-box;
-  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* W3C */
-}
-.head-logo > a {
-  color: $fg;
-  font-size: 14px;
-}
-.head-logo > a:hover {
-  text-decoration: none;
-}
-.head-logo-enter {
-  display: inline;
-  opacity: 0;
-  font-size: 11px;
-  position: relative;
-  background: #eee;
-  padding: 2px 5px;
-  color: #333;
-  font-weight: normal;
-  vertical-align: middle;
-  top: -1px;
-  @include transition(opacity, 0.03s);
-}
-.head-logo-enter-icon {
-  width: 12px;
-  height: 7px;
-  display: inline-block;
-  background: url(/img/enter.svg) 0 0 no-repeat;
-  background-size: 12px 7px;
-  margin-right: 5px;
-}
-.head-logo > a:hover .head-logo-enter {
-  opacity: 1;
-}
-.head-logo-path {
-  color: $fg;
-  font-weight: bold;
-  -webkit-font-smoothing: antialiased;
-  @include transition(color, 0.03s);
-}
-.head-logo > a:hover .head-logo-path:not(.alwayshover) {
-  color: #aaa;
-}
-.head-logo-path:not(.neverhover):hover {
-  color: #000 !important;
-}
-.head-logo-dolsign {
-  color: $head-green-color;
-  font-weight: normal;
-  &.is_root {
-    color: $head-red-color;
-  }
-}
-.head-logo-cd {
-  display: none;
-}
-.head-logo > a:hover .head-logo-cd {
-  display: inline;
-}
-.head-logo-path-mapped {
-  padding: 3px 5px;
-  background: #f1f1f1;
-  pointer-events: none;
-  @include radius(3px);
-  margin: 0 2px;
-}
-
-.head-items {
-  float: right;
-  color: #777; // color of separators
-  //padding: 8px 0;
-}
-a.head-item {
-  color: $fg;
-  font-size: $fs - 1px;
-  display: block;
-  float: left;
-  padding: 16px 0;
-}
-a.head-item > span {
-  padding: 0 12px;
-  border-right: 1px #d0d0d0 solid;
-}
-a.head-item > span > span {
-  padding: 2px 0;
-}
-a.head-item:last-child > span {
-  border-right: 0;
-  padding-right: 1px;
-}
-/*a.head-item:first-child > span {
-  padding-left: 2px;
-}*/
-a.head-item:hover {
-  //color: $link-color;
-  text-decoration: none;
-}
-a.head-item:hover > span > span {
-  border-bottom: 1px #d0d0d0 solid;
-}
 
 table.contacts {
   border: 0;
@@ -257,17 +130,17 @@ table.contacts td {
 table.contacts td.label {
   text-align: right;
   width: 30%;
-  color: #777;
+  color: $dark-grey;
 }
 table.contacts td.value {
   text-align: left;
   padding-left: 8px;
 }
 table.contacts td.value span {
-  background: #eee;
+  background: $inline-code-block-bg;
   padding: 3px 7px 4px;
   border-radius: 3px;
-  color: #333;
+  color: $fg;
   font-family: $ffMono;
   font-size: $fs - 1px;
 }
@@ -283,13 +156,14 @@ table.contacts td pre {
 table.contacts div.note {
   font-size: $fs - 3px;
   padding-top: 2px;
-  color: #777;
+  color: $dark-grey;
   > a {
-    color: #777;
-    border-bottom: 1px #ccc solid;
+    color: $dark-grey;
+    border-bottom: 1px $border-color solid;
     &:hover {
       text-decoration: none;
-      border-bottom-color: #999;
+      color: $link-color;
+      border-bottom-color: $link-color;
     }
   }
 }
@@ -360,11 +234,11 @@ table.contacts div.note {
   //font-weight: bold;
 }
 .md-file-attach-size {
-  color: #888;
+  color: $grey;
   margin-left: 2px;
 }
 .md-file-attach-note {
-  color: #000;
+  color: $fg;
   margin-left: 2px;
 }
 
@@ -402,7 +276,7 @@ table.contacts div.note {
 }
 .md-image-note {
   line-height: 150%;
-  color: #777;
+  color: $dark-grey;
   padding: 2px 0 4px;
 }
 
diff --git a/htdocs/scss/form.scss b/htdocs/scss/app/form.scss
index 4faa4d1..197732c 100644
--- a/htdocs/scss/form.scss
+++ b/htdocs/scss/app/form.scss
@@ -1,4 +1,4 @@
-@import 'vars';
+@import '../vars';
 
 $form-field-label-width: 120px;
 
@@ -35,7 +35,7 @@ form { display: block; margin: 0; }
     font-size: 12px;
     letter-spacing: 0.5px;
     text-transform: uppercase;
-    color: #888;
+    color: $grey;
   }
   .form-field {
     //margin-left: $form-field-label-width + 10px;
diff --git a/htdocs/scss/app/head.scss b/htdocs/scss/app/head.scss
new file mode 100644
index 0000000..fed30d1
--- /dev/null
+++ b/htdocs/scss/app/head.scss
@@ -0,0 +1,157 @@
+.head {
+  padding: 0 $side-padding;
+}
+.head-inner {
+  //padding: 13px 0;
+  position: relative;
+  border-bottom: 2px $border-color solid;
+}
+.head-logo {
+  padding: 4px 0;
+  font-family: $ffMono;
+  font-size: 15px;
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  background-color: transparent;
+}
+body:not(.theme-changing) .head-logo {
+  @include transition(background-color, 0.03s);
+}
+.head-logo {
+  padding: 16px 0;
+  background-color: $bg;
+}
+.head-logo:after {
+  content: '';
+  display: block;
+  width: 40px;
+  position: absolute;
+  right: -40px;
+  top: 0;
+  bottom: 0;
+  border-left: 8px $bg solid;
+  box-sizing: border-box;
+  background: linear-gradient(to left, rgba($bg, 0) 0%, rgba($bg, 1) 100%); /* W3C */
+}
+.head-logo > a {
+  color: $fg;
+  font-size: 14px;
+}
+.head-logo > a:hover {
+  text-decoration: none;
+}
+.head-logo-enter {
+  background: $code-block-bg;
+  color: $hljs_fg;
+  display: inline;
+  opacity: 0;
+  font-size: 11px;
+  position: relative;
+  padding: 2px 5px;
+  font-weight: normal;
+  vertical-align: middle;
+  top: -1px;
+}
+body:not(.theme-changing) .head-logo-enter {
+  @include transition(opacity, 0.03s);
+}
+.head-logo-enter-icon {
+  width: 12px;
+  height: 7px;
+  display: inline-block;
+  margin-right: 5px;
+  position: relative;
+  top: 1px;
+
+  > svg {
+    path {
+      fill: $hljs_fg;
+    }
+  }
+}
+.head-logo > a:hover .head-logo-enter {
+  opacity: 1;
+}
+.head-logo-path {
+  color: $fg;
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+}
+body:not(.theme-changing) .head-logo-path {
+  @include transition(color, 0.03s);
+}
+.head-logo > a:hover .head-logo-path:not(.alwayshover) {
+  color: $light_grey;
+}
+.head-logo-path:not(.neverhover):hover {
+  color: $fg !important;
+}
+.head-logo-dolsign {
+  color: $head_green_color;
+  font-weight: normal;
+  &.is_root {
+    color: $head_red_color;
+  }
+}
+.head-logo-cd {
+  display: none;
+}
+.head-logo > a:hover .head-logo-cd {
+  display: inline;
+}
+.head-logo-path-mapped {
+  padding: 3px 5px;
+  background: #f1f1f1;
+  pointer-events: none;
+  @include radius(3px);
+  margin: 0 2px;
+}
+
+.head-items {
+  float: right;
+  color: #777; // color of separators
+  //padding: 8px 0;
+}
+a.head-item {
+  color: $fg;
+  font-size: $fs - 1px;
+  display: block;
+  float: left;
+  padding: 16px 0;
+
+  > span {
+    position: relative;
+    padding: 0 12px;
+    border-right: 1px $head-items-separator solid;
+
+    > span {
+      padding: 2px 0;
+
+      > span.moon-icon {
+        position: absolute;
+        left: 0;
+
+        > svg path {
+          fill: $fg;
+        }
+      }
+    }
+  }
+
+  &.is-theme-switcher > span {
+    padding-left: 20px;
+  }
+
+  &:last-child > span {
+    border-right: 0;
+    padding-right: 1px;
+  }
+}
+a.head-item:hover {
+  //color: $link-color;
+  text-decoration: none;
+}
+a.head-item:hover > span > span {
+  border-bottom: 1px $head-items-separator solid;
+}
\ No newline at end of file
diff --git a/htdocs/scss/app/hljs.scss b/htdocs/scss/app/hljs.scss
new file mode 100644
index 0000000..913c45e
--- /dev/null
+++ b/htdocs/scss/app/hljs.scss
@@ -0,0 +1 @@
+@import "../hljs/github.css";
diff --git a/htdocs/scss/mobile.scss b/htdocs/scss/app/mobile.scss
index d4d0d25..a765e25 100644
--- a/htdocs/scss/mobile.scss
+++ b/htdocs/scss/app/mobile.scss
@@ -1,4 +1,4 @@
-@import 'vars';
+@import '../vars';
 
 textarea {
   -webkit-overflow-scrolling: touch;
diff --git a/htdocs/scss/pages.scss b/htdocs/scss/app/pages.scss
index 873a6ae..873a6ae 100644
--- a/htdocs/scss/pages.scss
+++ b/htdocs/scss/app/pages.scss
diff --git a/htdocs/scss/bundle_admin.scss b/htdocs/scss/bundle_admin.scss
new file mode 100644
index 0000000..06808d0
--- /dev/null
+++ b/htdocs/scss/bundle_admin.scss
@@ -0,0 +1,3 @@
+.admin-page {
+  line-height: 155%;
+}
diff --git a/htdocs/scss/bundle_common.scss b/htdocs/scss/bundle_common.scss
new file mode 100644
index 0000000..dd0bd6a
--- /dev/null
+++ b/htdocs/scss/bundle_common.scss
@@ -0,0 +1,10 @@
+@import "./app/common";
+@import "./app/head";
+@import "./app/blog";
+@import "./app/form";
+@import "./app/pages";
+@import "./hljs/github.scss";
+
+@media screen and (max-width: 600px) {
+  @import "./app/mobile";
+}
diff --git a/htdocs/scss/colors/dark.scss b/htdocs/scss/colors/dark.scss
new file mode 100644
index 0000000..c7c25cf
--- /dev/null
+++ b/htdocs/scss/colors/dark.scss
@@ -0,0 +1,46 @@
+$head_green_color: #0bad19;
+$head_red_color: #e23636;
+$link-color: #71abe5;
+
+$grey: #798086;
+$dark-grey: $grey;
+$light-grey: $grey;
+$fg: #eee;
+$bg: #222;
+
+$code-block-bg: #394146;
+$inline-code-block-bg: #394146;
+
+$light-bg: #464c4e;
+$dark-bg: #272C2D;
+$dark-fg: #999;
+
+$input-border: #48535a;
+$input-border-focused: #48535a;
+$input-bg: #30373b;
+$border-color: #48535a;
+
+$error-block-bg: #f9eeee;
+$error-block-fg: #d13d3d;
+
+$success-block-bg: #eff5f0;
+$success-block-fg: #2a6f34;
+
+$head-items-separator: #5e6264;
+
+// colors from https://github.com/Kelbster/highlightjs-material-dark-theme/blob/master/css/materialdark.css
+$hljs_fg: #CDD3D8;
+$hljs_bg: #2B2B2D;
+$hljs_quote: #6272a4;
+$hljs_string: #f1fa8c;
+$hljs_literal: #bd93f9;
+$hljs_title: #75A5FF;
+$hljs_keyword: #C792EA;
+$hljs_type: #da4939;
+$hljs_tag: #abb2bf;
+$hljs_regexp: #F77669;
+$hljs_symbol: #C792EA;
+$hljs_builtin: #C792EA;
+$hljs_meta: #75A5FF;
+$hljs_deletion: #e6e1dc;
+$hljs_addition: #144212;
\ No newline at end of file
diff --git a/htdocs/scss/colors/light.scss b/htdocs/scss/colors/light.scss
new file mode 100644
index 0000000..e6c14ba
--- /dev/null
+++ b/htdocs/scss/colors/light.scss
@@ -0,0 +1,46 @@
+$head_green_color: #0bad19;
+$head_red_color: #ce1a1a;
+$link-color: #116fd4;
+
+$grey: #888;
+$dark-grey: #777;
+$light-grey: #999;
+$fg: #222;
+$bg: #fff;
+
+$code-block-bg: #f3f3f3;
+$inline-code-block-bg: #f1f1f1;
+
+$light-bg: #464c4e;
+$dark-bg: #272C2D;
+$dark-fg: #999;
+
+$input-border: #e0e0e0;
+$input-border-focused: #e0e0e0;
+$input-bg: #f7f7f7;
+$border-color: #e0e0e0;
+
+$error-block-bg: #f9eeee;
+$error-block-fg: #d13d3d;
+
+$success-block-bg: #eff5f0;
+$success-block-fg: #2a6f34;
+
+$head-items-separator: #d0d0d0;
+
+// github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+$hljs_fg: #333;
+$hljs_bg: #f8f8f8;
+$hljs_quote: #998;
+$hljs_string: #d14;
+$hljs_literal: #008080;
+$hljs_title: #900;
+$hljs_keyword: $hljs_fg;
+$hljs_type: #458;
+$hljs_tag: #000080;
+$hljs_regexp: #009926;
+$hljs_symbol: #990073;
+$hljs_builtin: #0086b3;
+$hljs_meta: #999;
+$hljs_deletion: #fdd;
+$hljs_addition: #dfd;
\ No newline at end of file
diff --git a/htdocs/scss/common-bundle.scss b/htdocs/scss/common-bundle.scss
deleted file mode 100644
index 397f0c3..0000000
--- a/htdocs/scss/common-bundle.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "./common.scss";
-@import "./blog.scss";
-@import "./form.scss";
-@import "./hljs/github.scss";
-@import "./pages.scss";
-
-@media screen and (max-width: 600px) {
-  @import "./mobile.scss";
-}
diff --git a/htdocs/scss/entries/admin/dark.scss b/htdocs/scss/entries/admin/dark.scss
new file mode 100644
index 0000000..d704436
--- /dev/null
+++ b/htdocs/scss/entries/admin/dark.scss
@@ -0,0 +1,2 @@
+@import '../../colors/dark';
+@import '../../bundle_admin';
\ No newline at end of file
diff --git a/htdocs/scss/entries/admin/light.scss b/htdocs/scss/entries/admin/light.scss
new file mode 100644
index 0000000..4ac8bf0
--- /dev/null
+++ b/htdocs/scss/entries/admin/light.scss
@@ -0,0 +1,2 @@
+@import '../../colors/light';
+@import '../../bundle_admin';
\ No newline at end of file
diff --git a/htdocs/scss/entries/common/dark.scss b/htdocs/scss/entries/common/dark.scss
new file mode 100644
index 0000000..f983214
--- /dev/null
+++ b/htdocs/scss/entries/common/dark.scss
@@ -0,0 +1,2 @@
+@import '../../colors/dark';
+@import '../../bundle_common';
\ No newline at end of file
diff --git a/htdocs/scss/entries/common/light.scss b/htdocs/scss/entries/common/light.scss
new file mode 100644
index 0000000..a3044bd
--- /dev/null
+++ b/htdocs/scss/entries/common/light.scss
@@ -0,0 +1,2 @@
+@import '../../colors/light';
+@import '../../bundle_common';
\ No newline at end of file
diff --git a/htdocs/scss/hljs.scss b/htdocs/scss/hljs.scss
deleted file mode 100644
index 36f52de..0000000
--- a/htdocs/scss/hljs.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "./hljs/github.css";
diff --git a/htdocs/scss/hljs/github.scss b/htdocs/scss/hljs/github.scss
index 791932b..ddbfc0a 100644
--- a/htdocs/scss/hljs/github.scss
+++ b/htdocs/scss/hljs/github.scss
@@ -1,27 +1,21 @@
-/*
-
-github.com style (c) Vasily Polovnyov <vast@whiteants.net>
-
-*/
-
 .hljs {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
+  color: $hljs_fg;
+  background: $hljs_bg;
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: #998;
+  color: $hljs_quote;
   font-style: italic;
 }
 
 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-subst {
-  color: #333;
+  color: $hljs_fg;
   font-weight: bold;
 }
 
@@ -30,18 +24,18 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: #008080;
+  color: $hljs_literal;
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: #d14;
+  color: $hljs_string;
 }
 
 .hljs-title,
 .hljs-section,
 .hljs-selector-id {
-  color: #900;
+  color: $hljs_title;
   font-weight: bold;
 }
 
@@ -51,43 +45,43 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 
 .hljs-type,
 .hljs-class .hljs-title {
-  color: #458;
+  color: $hljs_type;
   font-weight: bold;
 }
 
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  color: $hljs_tag;
   font-weight: normal;
 }
 
 .hljs-regexp,
 .hljs-link {
-  color: #009926;
+  color: $hljs_regexp;
 }
 
 .hljs-symbol,
 .hljs-bullet {
-  color: #990073;
+  color: $hljs_symbol;
 }
 
 .hljs-built_in,
 .hljs-builtin-name {
-  color: #0086b3;
+  color: $hljs_builtin;
 }
 
 .hljs-meta {
-  color: #999;
+  color: $hljs_meta;
   font-weight: bold;
 }
 
 .hljs-deletion {
-  background: #fdd;
+  background: $hljs_deletion;
 }
 
 .hljs-addition {
-  background: #dfd;
+  background: $hljs_addition;
 }
 
 .hljs-emphasis {
diff --git a/htdocs/scss/vars.scss b/htdocs/scss/vars.scss
index e056740..cc67f04 100644
--- a/htdocs/scss/vars.scss
+++ b/htdocs/scss/vars.scss
@@ -4,42 +4,9 @@ $ff: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
 $ffMono: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
 
 $base-width: 900px;
-//$sb-width: 120px;
 $side-padding: 25px;
 $base-padding: 18px;
-
 $footer-height: 64px;
-$head-green-color: #0bad19;
-$head-red-color: #ce1a1a;
-$link-color: #116fd4;
-
-$bg: #f7f7f7;
-$content-bg: #fff;
-$code-block-bg: #f3f3f3;
-$inline-code-block-bg: #f1f1f1;
-
-$fg: #222;
-$blue1: #729fcf;
-$blue2: #3465a4;
-$blue3: #204a87;
-$orange1: #fcaf3e;
-$orange2: #f57900;
-$orange3: #ce5c00;
-
-$light-bg: #464c4e;
-$dark-bg: #272C2D;
-$dark-fg: #999;
-
-$input-border: #e0e0e0;
-$input-border-focused: #e0e0e0;
-$input-bg: #f7f7f7;
-$border-color: #e0e0e0;
-
-$error-block-bg: #f9eeee;
-$error-block-fg: #d13d3d;
-
-$success-block-bg: #eff5f0;
-$success-block-fg: #2a6f34;
 
 @mixin radius($radius) {
   -o-border-radius: $radius;
@@ -50,9 +17,9 @@ $success-block-fg: #2a6f34;
 }
 
 @mixin transition($property, $duration, $easing: linear) {
-	transition: $property $duration $easing;
-	-webkit-transition: $property $duration $easing;
-	-moz-transition: $property $duration $easing;
+  transition: $property $duration $easing;
+  -webkit-transition: $property $duration $easing;
+  -moz-transition: $property $duration $easing;
 }
 
 @mixin linearGradient($top, $bottom){