From 259a6624ed4dcfbf96df92452f265d4cbb9d49f7 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 27 Feb 2020 21:05:50 +0800
Subject: [PATCH] Improve the way of using color schemes.

- Gracefully switch code color scheme in the future.
- Also uniform border color.
---
 assets/css/_colors/dark-syntax.scss           |  93 ++++++++++++
 .../dark-typography.scss}                     | 104 ++++++-------
 assets/css/_colors/light-syntax.scss          |  80 ++++++++++
 assets/css/_colors/light-typography.scss      | 124 +++++++++++++++
 assets/css/_dark/dark-syntax.scss             |  98 ------------
 assets/css/_module.scss                       |   6 +-
 assets/css/_variables.scss                    |   4 +-
 assets/css/archives.scss                      |  17 +--
 assets/css/categories.scss                    |   2 +-
 assets/css/category-tag.scss                  |   2 +-
 assets/css/home.scss                          |  19 +--
 assets/css/main.scss                          | 108 +++++++++-----
 assets/css/post.scss                          |  41 ++---
 assets/css/syntax.scss                        | 141 ++++++------------
 assets/css/tags.scss                          |   4 +-
 15 files changed, 513 insertions(+), 330 deletions(-)
 create mode 100644 assets/css/_colors/dark-syntax.scss
 rename assets/css/{_dark/dark-main.scss => _colors/dark-typography.scss} (57%)
 create mode 100644 assets/css/_colors/light-syntax.scss
 create mode 100644 assets/css/_colors/light-typography.scss
 delete mode 100644 assets/css/_dark/dark-syntax.scss

diff --git a/assets/css/_colors/dark-syntax.scss b/assets/css/_colors/dark-syntax.scss
new file mode 100644
index 0000000..d375219
--- /dev/null
+++ b/assets/css/_colors/dark-syntax.scss
@@ -0,0 +1,93 @@
+/*!
+* The syntax dark mode styles.
+* v2.0
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2018-2019 Cotes Chung
+* MIT Licensed
+*/
+
+@mixin dark-syntax {
+  /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
+  .highlight pre { background-color: #272822; }
+  .highlight .hll { background-color: #272822; }
+  .highlight .c { color: #75715e } /* Comment */
+  .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
+  .highlight .k { color: #66d9ef } /* Keyword */
+  .highlight .l { color: #ae81ff } /* Literal */
+  .highlight .n { color: #f8f8f2 } /* Name */
+  .highlight .o { color: #f92672 } /* Operator */
+  .highlight .p { color: #f8f8f2 } /* Punctuation */
+  .highlight .cm { color: #75715e } /* Comment.Multiline */
+  .highlight .cp { color: #75715e } /* Comment.Preproc */
+  .highlight .c1 { color: #75715e } /* Comment.Single */
+  .highlight .cs { color: #75715e } /* Comment.Special */
+  .highlight .ge { font-style: italic } /* Generic.Emph */
+  .highlight .gs { font-weight: bold } /* Generic.Strong */
+  .highlight .kc { color: #66d9ef } /* Keyword.Constant */
+  .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+  .highlight .kn { color: #f92672 } /* Keyword.Namespace */
+  .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+  .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+  .highlight .kt { color: #66d9ef } /* Keyword.Type */
+  .highlight .ld { color: #e6db74 } /* Literal.Date */
+  .highlight .m { color: #ae81ff } /* Literal.Number */
+  .highlight .s { color: #e6db74 } /* Literal.String */
+  .highlight .na { color: #a6e22e } /* Name.Attribute */
+  .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+  .highlight .nc { color: #a6e22e } /* Name.Class */
+  .highlight .no { color: #66d9ef } /* Name.Constant */
+  .highlight .nd { color: #a6e22e } /* Name.Decorator */
+  .highlight .ni { color: #f8f8f2 } /* Name.Entity */
+  .highlight .ne { color: #a6e22e } /* Name.Exception */
+  .highlight .nf { color: #a6e22e } /* Name.Function */
+  .highlight .nl { color: #f8f8f2 } /* Name.Label */
+  .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+  .highlight .nx { color: #a6e22e } /* Name.Other */
+  .highlight .py { color: #f8f8f2 } /* Name.Property */
+  .highlight .nt { color: #f92672 } /* Name.Tag */
+  .highlight .nv { color: #f8f8f2 } /* Name.Variable */
+  .highlight .ow { color: #f92672 } /* Operator.Word */
+  .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+  .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
+  .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+  .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+  .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+  .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+  .highlight .sc { color: #e6db74 } /* Literal.String.Char */
+  .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+  .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+  .highlight .se { color: #ae81ff } /* Literal.String.Escape */
+  .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+  .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+  .highlight .sx { color: #e6db74 } /* Literal.String.Other */
+  .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+  .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+  .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+  .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+  .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+  .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+  .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+  .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+  .highlight .gh { } /* Generic Heading & Diff Header */
+  .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+  .highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
+  .highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
+
+
+  /*-----  My styles ------*/
+
+  --code-highlighter-rouge: #272822;
+  --highlight-bg-color: #272822;
+  --highlighter-rouge-color: #de6b18;
+
+  --highlight-lineno-color: #6c6c6d;
+  --highlight-lineno-border-color: #3c4042;
+
+  .highlight {
+    @include highlight-box-shadow(none);
+    .gp { color: #818c96; }
+  }
+  pre { color: #818c96 } /* override Bootstrap */
+  kbd { background-color: black; }
+}
\ No newline at end of file
diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_colors/dark-typography.scss
similarity index 57%
rename from assets/css/_dark/dark-main.scss
rename to assets/css/_colors/dark-typography.scss
index e0d4d62..d974cbd 100644
--- a/assets/css/_dark/dark-main.scss
+++ b/assets/css/_colors/dark-typography.scss
@@ -9,68 +9,94 @@
 @mixin dark-scheme {
   /* framework */
   --main-wrapper-bg: rgb(27, 27, 30);
+  --body-bg: var(--main-wrapper-bg);
   --topbar-wrapper-bg: rgb(39, 40, 43);
   --search-wrapper-bg: rgb(34, 34, 39);
-  --search-icon: rgb(100, 102, 105);
-  --input-focus-border: rgb(112, 114, 115);
-  --footer-border: rgb(44, 45, 45);
+  --search-icon-color: rgb(100, 102, 105);
+  --input-focus-border-color: rgb(112, 114, 115);
   --mask-bg: rgb(68, 69, 70);
-
-  /* sidebar */
-  --nav-cursor: rgb(183, 182, 182);
-  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
+  --footer-bg-color: var(--main-wrapper-bg);
 
   /* common color */
   --text-color: rgb(175, 176, 177);
   --text-muted-color: rgb(107, 116, 124);
   --link-color: rgb(138, 180, 248);
   --link-underline-color: rgb(99, 131, 182);
-  --main-border: rgb(63, 65, 68);
+  --main-border-color: rgb(44, 45, 45);
   --button-bg: rgb(39, 40, 33);
-  --blockquote-border: rgb(66, 66, 66);
-  --blockquote-text: rgb(117, 117, 117);
+  --blockquote-border-color: rgb(66, 66, 66);
+  --blockquote-text-color: rgb(117, 117, 117);
+
+  --btn-border-color: rgb(63, 65, 68);
+  --btn-backtotop-color: var(--text-color);
+  --btn-backtotop-border-color: var(--btn-border-color);
+  --btn-box-shadow: var(--main-wrapper-bg);
 
   --card-bg: rgb(39, 40, 33);
   --card-header-bg: rgb(51, 50, 50);
-  --relate-post-title: rgb(164, 175, 181);
+  --label-relate-post: rgb(164, 175, 181);
+
+  /* Sidebar */
+  --nav-cursor-color: rgb(183, 182, 182);
+  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
+
+  /* Top Bar */
+  --topbar-text-color: var(--text-color);
 
   /* Home page */
-  --btn-active-bg: #1c345e;
-  --btn-active-border-color: #8ab4f8;
+  --post-list-text-color: rgb(175, 176, 177);
+  --btn-patinator-text-color: var(--text-color);
+  --btn-active-bg: rgba(28, 52, 94, 1);
+  --btn-active-border-color: rgb(66, 94, 138);
+  --btn-text-color: var(--text-color);
+  --btn-paginator-border-color: var(--btn-border-color);
+  --btn-paginator-shadow: var(--main-wrapper-bg);
 
-  /* posts */
+  /* Posts */
   --toc-highlight: rgb(116, 178, 243);
   --tag-bg: rgb(41, 40, 40);
   --tag-hover: rgb(43, 56, 62);
   --tb-odd-bg: rgba(52, 53, 42, 0.52); /* odd rows of the posts' table */
   --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
+  --tb-even-border-color: var(--tb-odd-bg);
+  --tb-even-border-color: var(--tb-odd-bg);
   --footnote-target-bg: rgb(63, 81, 181);
-  --btn-sharing: #6c757d;
+  --btn-share-color: #6c757d;
+  --btn-share-hover-color: #bfc1ca;
+  --relate-post-date: var(--text-muted-color);
+  --card-border-color: var(--main-wrapper-bg);
+  --card-box-shadow: var(--main-wrapper-bg);
 
   /* tags */
   --tag-border: rgb(59, 79, 88);
   --tag-shadow: rgb(32, 33, 33);
+  --search-tag-bg: var(--tag-bg);
+
+  --dash-color: rgb(63, 65, 68);
 
   /* categories */
+  --categories-border: rgb(64, 66, 69);
   --categories-hover-bg: rgb(73, 75, 76);
 
   /* archives */
   --timeline-node-bg: rgb(150, 152, 156);
+  --timeline-color: rgb(63, 65, 68);
+  --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
   ---footer-link: rgb(146, 146, 146);
 
+
   hr {
-    border-color: var(--main-border);
+    border-color: var(--main-border-color);
   }
 
-  /* posts' toc */
+  /* posts' toc, override BS */
   nav[data-toggle=toc] .nav-link.active,
   nav[data-toggle=toc] .nav-link.active:focus,
   nav[data-toggle=toc] .nav-link.active:hover,
   nav[data-toggle=toc] .nav>li>a:focus,
   nav[data-toggle=toc] .nav>li>a:hover {
-    /* Override BS */
     color: var(--toc-highlight)!important;
     border-left-color: var(--toc-highlight)!important;
   }
@@ -86,59 +112,19 @@
       background-color: var(--card-header-bg);
     }
     .list-group-item {
-      // @extend %category-bg;
       border-left: none;
       border-right: none;
       padding-left: 2rem;
-      border-color: var(--main-border);
+      border-color: var(--categories-border);
       &:last-child {
         border-bottom-color: var(--card-bg);
       }
     }
   }
 
-
   #archives li:nth-child(odd) {
     background-image: linear-gradient(to left,
       rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
   }
 
 } // dark-scheme
-
-
-@mixin set-visible($light-display, $dark-display) {
-  [light-mode-invisible] {
-    display: $light-display;
-  }
-
-  [dark-mode-invisible] {
-    display: $dark-display;
-  }
-}
-
-@mixin mode-toggle($dark-mode: false) {
-  @if $dark-mode {
-    @include set-visible(inline-block, none);
-    @include dark-scheme;
-  } @else {
-    @include set-visible(none, inline-block);
-  }
-}
-
-html:not([mode]), html[mode=light] {
-  @include mode-toggle();
-}
-
-html[mode=dark] {
-  @include mode-toggle(true);
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not([mode]), html[mode=dark] {
-    @include mode-toggle(true);
-  }
-
-  html[mode=light] {
-    @include mode-toggle();
-  }
-}
diff --git a/assets/css/_colors/light-syntax.scss b/assets/css/_colors/light-syntax.scss
new file mode 100644
index 0000000..8fd8606
--- /dev/null
+++ b/assets/css/_colors/light-syntax.scss
@@ -0,0 +1,80 @@
+/*!
+* The syntax light mode code snippet colors.
+* v2.1
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2020 Cotes Chung
+* MIT Licensed
+*/
+
+@mixin light-syntax {
+  /* see: <https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css> */
+  .highlight .hll { background-color: #ffffcc }
+  .highlight .c { color: #999988; font-style: italic } /* Comment */
+  .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+  .highlight .k { color: #000000; font-weight: bold } /* Keyword */
+  .highlight .o { color: #000000; font-weight: bold } /* Operator */
+  .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+  .highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+  .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+  .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+  .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+  .highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
+  .highlight .gr { color: #aa0000 } /* Generic.Error */
+  .highlight .gh { color: #999999 } /* Generic.Heading */
+  .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+  .highlight .go { color: #888888 } /* Generic.Output */
+  .highlight .gp { color: #555555 } /* Generic.Prompt */
+  .highlight .gs { font-weight: bold } /* Generic.Strong */
+  .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+  .highlight .gt { color: #aa0000 } /* Generic.Traceback */
+  .highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+  .highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+  .highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+  .highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+  .highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+  .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+  .highlight .m { color: #009999 } /* Literal.Number */
+  .highlight .s { color: #d01040 } /* Literal.String */
+  .highlight .na { color: #008080 } /* Name.Attribute */
+  .highlight .nb { color: #0086B3 } /* Name.Builtin */
+  .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+  .highlight .no { color: #008080 } /* Name.Constant */
+  .highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+  .highlight .ni { color: #800080 } /* Name.Entity */
+  .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+  .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+  .highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
+  .highlight .nn { color: #555555 } /* Name.Namespace */
+  .highlight .nt { color: #000080 } /* Name.Tag */
+  .highlight .nv { color: #008080 } /* Name.Variable */
+  .highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+  .highlight .w { color: #bbbbbb } /* Text.Whitespace */
+  .highlight .mf { color: #009999 } /* Literal.Number.Float */
+  .highlight .mh { color: #009999 } /* Literal.Number.Hex */
+  .highlight .mi { color: #009999 } /* Literal.Number.Integer */
+  .highlight .mo { color: #009999 } /* Literal.Number.Oct */
+  .highlight .sb { color: #d01040 } /* Literal.String.Backtick */
+  .highlight .sc { color: #d01040 } /* Literal.String.Char */
+  .highlight .sd { color: #d01040 } /* Literal.String.Doc */
+  .highlight .s2 { color: #d01040 } /* Literal.String.Double */
+  .highlight .se { color: #d01040 } /* Literal.String.Escape */
+  .highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
+  .highlight .si { color: #d01040 } /* Literal.String.Interpol */
+  .highlight .sx { color: #d01040 } /* Literal.String.Other */
+  .highlight .sr { color: #009926 } /* Literal.String.Regex */
+  .highlight .s1 { color: #d01040 } /* Literal.String.Single */
+  .highlight .ss { color: #990073 } /* Literal.String.Symbol */
+  .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+  .highlight .vc { color: #008080 } /* Name.Variable.Class */
+  .highlight .vg { color: #008080 } /* Name.Variable.Global */
+  .highlight .vi { color: #008080 } /* Name.Variable.Instance */
+  .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+
+  /*--- custom light colors ---*/
+  --code-highlighter-rouge: #e9ecef;
+  --highlight-bg-color: #f7f7f7;
+  --highlighter-rouge-color: black;
+  --highlight-lineno-color: #c2c6cc;
+  --highlight-lineno-border-color: #e9ecef;
+
+} // light-syntax
diff --git a/assets/css/_colors/light-typography.scss b/assets/css/_colors/light-typography.scss
new file mode 100644
index 0000000..a3f4a97
--- /dev/null
+++ b/assets/css/_colors/light-typography.scss
@@ -0,0 +1,124 @@
+/*!
+* The syntax light mode typography colors
+* v2.1
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2020 Cotes Chung
+* MIT Licensed
+*/
+
+@mixin light-scheme {
+
+  --body-bg: #fafafa;
+
+  --mask-bg: #c1c3c5;
+
+  --main-wrapper-bg: white;
+
+  --main-border-color: #f3f3f3;
+
+  --btn-border-color: #e9ecef;
+
+  --text-color: #212529;
+
+  --blockquote-border-color: #eee;
+
+  --blockquote-text-color: #9a9a9a;
+
+  --link-color: #2a408e;
+
+  --link-underline-color: #c2c6cc;
+
+  --text-muted-color: gray;
+
+  --tb-odd-bg: #f8f9fa;
+
+  --tb-even-border-color: rgba(210, 215, 217, 0.75);
+
+  --button-bg: #fff;
+
+  --btn-backtotop-color: #686868;
+
+  --btn-backtotop-border-color: #f1f1f1; //--main-border-color,
+
+  --btn-box-shadow: #eaeaea;
+
+  /* Sidebar */
+
+  --sidebar-bg: radial-gradient(
+    circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
+
+  --nav-cursor-color: #fcfcfc;
+
+  /* Topbar */
+
+  --topbar-wrapper-bg: white;
+
+  --topbar-text-color: rgb(78, 78, 78);
+
+  --search-wrapper-bg: #fff;
+
+  --search-wrapper-bg: #f5f5f5;
+
+  --search-tag-bg: #f8f9fa;
+
+  --search-icon-color: #c2c6cc;
+
+  --input-focus-border-color: var(--btn-border-color);
+
+  /* Home */
+
+  --post-list-text-color: dimgray;
+
+  --btn-patinator-text-color: #555555;
+
+  --btn-active-bg: #2a408e;
+
+  --btn-active-border-color: #007bff;
+
+  --btn-text-color: #f8f8f8;
+
+  --btn-paginator-border-color: #f1f1f1;
+
+  --btn-paginator-shadow: #4b92d2;
+
+  /* Posts */
+
+  --btn-share-hover-color: var(--link-color);
+
+  --card-border-color: #f1f1f1;
+
+  --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
+
+  --label-relate-post: #353a3d;
+
+  --relate-post-date: rgba(30, 55, 70, .4);
+
+  --tag-bg: rgba(0, 0, 0, 0.075);
+
+  --tag-border: #dee2e6;
+
+  --tag-shadow: var(--btn-border-color);
+
+  --tag-hover: rgb(222, 226, 230);
+
+  --categories-hover-bg: var(--btn-border-color);
+
+  --dash-color: silver;
+
+
+  /* Archive */
+
+  --timeline-color: rgba(0, 0, 0, 0.075);
+
+  --timeline-node-bg: #c2c6cc;
+
+  --timeline-year-dot-color: #ffffff;
+
+  /* Footer */
+
+  --footer-bg-color: #ffffff;
+
+  --footnote-target-bg: lightcyan;
+
+  ---footer-link: inherit;
+}
diff --git a/assets/css/_dark/dark-syntax.scss b/assets/css/_dark/dark-syntax.scss
deleted file mode 100644
index 8a20711..0000000
--- a/assets/css/_dark/dark-syntax.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-/*!
-* The syntax dark mode styles
-* v2.0
-* https://github.com/cotes2020/jekyll-theme-chirpy
-* © 2018-2019 Cotes Chung
-* MIT Licensed
-*/
-
-@mixin box-shadow($val) {
-  -moz-box-shadow: $val;
-  -webkit-box-shadow: $val;
-  box-shadow: $val;
-}
-
-@mixin dark-syntax-scheme {
-  /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
-  --highlight-pre-bg: #272822;
-  --highlight-hll-bg: #272822;
-  --highlight-c: #75715e; /* Comment */
-  --highlight-err: #960050; /* Error */
-  --highlight-err-bg: #1e0010; /* Error background */
-  --highlight-k: #66d9ef; /* Keyword */
-  --highlight-l: #ae81ff; /* Literal */
-  --highlight-n: #f8f8f2; /* Name */
-  --highlight-o: #f92672; /* Operator */
-  --highlight-p: #f8f8f2; /* Punctuation */
-  --highlight-cm: #75715e; /* Comment.Multiline */
-  --highlight-cp: #75715e; /* Comment.Preproc */
-  --highlight-c1: #75715e; /* Comment.Single */
-  --highlight-cs: #75715e; /* Comment.Special */
-  --highlight-kc: #66d9ef; /* Keyword.Constant */
-  --highlight-kd: #66d9ef; /* Keyword.Declaration */
-  --highlight-kn: #f92672; /* Keyword.Namespace */
-  --highlight-kp: #66d9ef; /* Keyword.Pseudo */
-  --highlight-kr: #66d9ef; /* Keyword.Reserved */
-  --highlight-kt: #66d9ef; /* Keyword.Type */
-  --highlight-ld: #e6db74; /* Literal.Date */
-  --highlight-m: #ae81ff; /* Literal.Number */
-  --highlight-s: #e6db74; /* Literal.String */
-  --highlight-na: #a6e22e; /* Name.Attribute */
-  --highlight-nb: #f8f8f2; /* Name.Builtin */
-  --highlight-nc: #a6e22e; /* Name.Class */
-  --highlight-no: #66d9ef; /* Name.Constant */
-  --highlight-nd: #a6e22e; /* Name.Decorator */
-  --highlight-ni: #f8f8f2; /* Name.Entity */
-  --highlight-ne: #a6e22e; /* Name.Exception */
-  --highlight-nf: #a6e22e; /* Name.Function */
-  --highlight-nl: #f8f8f2; /* Name.Label */
-  --highlight-nn: #f8f8f2; /* Name.Namespace */
-  --highlight-nx: #a6e22e; /* Name.Other */
-  --highlight-py: #f8f8f2; /* Name.Property */
-  --highlight-nt: #f92672; /* Name.Tag */
-  --highlight-nv: #f8f8f2; /* Name.Variable */
-  --highlight-ow: #f92672; /* Operator.Word */
-  --highlight-w: #f8f8f2; /* Text.Whitespace */
-  --highlight-mf: #ae81ff; /* Literal.Number.Float */
-  --highlight-mh: #ae81ff; /* Literal.Number.Hex */
-  --highlight-mi: #ae81ff; /* Literal.Number.Integer */
-  --highlight-mo: #ae81ff; /* Literal.Number.Oct */
-  --highlight-sb: #e6db74; /* Literal.String.Backtick */
-  --highlight-sc: #e6db74; /* Literal.String.Char */
-  --highlight-sd: #e6db74; /* Literal.String.Doc */
-  --highlight-s2: #e6db74; /* Literal.String.Double */
-  --highlight-se: #ae81ff; /* Literal.String.Escape */
-  --highlight-sh: #e6db74; /* Literal.String.Heredoc */
-  --highlight-si: #e6db74; /* Literal.String.Interpol */
-  --highlight-sx: #e6db74; /* Literal.String.Other */
-  --highlight-sr: #e6db74; /* Literal.String.Regex */
-  --highlight-s1: #e6db74; /* Literal.String.Single */
-  --highlight-ss: #e6db74; /* Literal.String.Symbol */
-  --highlight-bp: #f8f8f2; /* Name.Builtin.Pseudo */
-  --highlight-vc: #f8f8f2; /* Name.Variable.Class */
-  --highlight-vg: #f8f8f2; /* Name.Variable.Global */
-  --highlight-vi: #f8f8f2; /* Name.Variable.Instance */
-  --highlight-il: #ae81ff; /* Literal.Number.Integer.Long */
-
-  // --highlight-gh: none; /* Generic Heading & Diff Header */
-  --highlight-gu: #75715e; /* Generic.Subheading & Diff Unified/Comment? */
-  --highlight-gd: #f92672; /* Generic.Deleted & Diff Deleted */
-
-  /* My styles */
-  --highlight-lineno: #6c6c6d;
-  --highlight-lineno-border: #3c4042;
-  --highlighter-rouge: #de6b18;
-
-  pre {
-    color: #818c96; /* override Bootstrap */
-  }
-
-  kbd {
-    background-color: black;
-  }
-
-  .highlight {
-    @include box-shadow(none);
-  }
-
-} // mixin dark-syntax-scheme
\ No newline at end of file
diff --git a/assets/css/_module.scss b/assets/css/_module.scss
index 230fcf7..cc28515 100644
--- a/assets/css/_module.scss
+++ b/assets/css/_module.scss
@@ -10,7 +10,7 @@
 /*---------- scss placeholder ---------*/
 
 %tag-hover {
-  background: var(--tag-hover, rgb(222, 226, 230));
+  background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
 }
 
@@ -26,7 +26,7 @@
 }
 
 %link-color {
-  color: var(--link-color, #2a408e);
+  color: var(--link-color);
 }
 
 %no-bottom-border {
@@ -45,7 +45,7 @@
 
 %footer-content {
   font-weight: 600;
-  color: var(---footer-link, inherit);
+  color: var(---footer-link);
 }
 
 
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index 541c2b4..e95e0fd 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -7,6 +7,8 @@
 * MIT Licensed
 */
 
+/*--- ↓ width and height ----*/
+
 $sidebar-width-small: 210px;
 $sidebar-width-medium: 260px;
 $sidebar-width-large: 350px;
@@ -19,4 +21,4 @@ $main-content-max-width: 1150px;
 
 $panel-max-width: 300px;
 
-$post-extend-min-height: 35rem;
\ No newline at end of file
+$post-extend-min-height: 35rem;
diff --git a/assets/css/archives.scss b/assets/css/archives.scss
index 35a656e..afc1078 100644
--- a/assets/css/archives.scss
+++ b/assets/css/archives.scss
@@ -8,8 +8,6 @@
   MIT License
 */
 
-$dot-color: #c2c6cc;
-
 %date-timeline {
   content: "";
   width: 4px;
@@ -17,7 +15,7 @@ $dot-color: #c2c6cc;
   display: inline-block;
   float: left;
   position: relative;
-  background-color: var(--main-border, rgba(0, 0, 0, 0.075));
+  background-color: var(--timeline-color);
 }
 
 #archives {
@@ -27,7 +25,8 @@ $dot-color: #c2c6cc;
     line-height: 3rem;
     &:nth-child(odd) {
       background-color: var(--main-wrapper-bg, #fff);
-      background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
+      background-image: linear-gradient(
+        to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
     }
     >div {
       white-space: nowrap;
@@ -63,9 +62,9 @@ $dot-color: #c2c6cc;
       top: -26px;
       left: 63px;
       border: 3px solid;
-      background-color: var(--main-border, #ffffff);
-      border-color: var(--timeline-node-bg, $dot-color);
-      box-shadow: 0 0 2px 0 $dot-color;
+      background-color: var(--timeline-year-dot-color);
+      border-color: var(--timeline-node-bg);
+      box-shadow: 0 0 2px 0 #c2c6cc;
       z-index: 1;
     }
   } // #archives span.lead
@@ -90,8 +89,8 @@ $dot-color: #c2c6cc;
         float: left;
         top: 1.35rem;
         left: 69px;
-        background-color: var(--timeline-node-bg, $dot-color);
-        box-shadow: 0 0 3px 0 $dot-color;
+        background-color: var(--timeline-node-bg);
+        box-shadow: 0 0 3px 0 #c2c6cc;
         z-index: 1;
       }
     }
diff --git a/assets/css/categories.scss b/assets/css/categories.scss
index f8fa208..ac3680e 100644
--- a/assets/css/categories.scss
+++ b/assets/css/categories.scss
@@ -62,7 +62,7 @@
 
 @media (hover: hover) { // only works on desktop
   .category-trigger:hover {
-    background-color: var(--categories-hover-bg, #e9ecef);
+    background-color: var(--categories-hover-bg);
   }
 }
 
diff --git a/assets/css/category-tag.scss b/assets/css/category-tag.scss
index c70b851..6c72eb6 100644
--- a/assets/css/category-tag.scss
+++ b/assets/css/category-tag.scss
@@ -51,7 +51,7 @@ a:hover {
 
 .dash {
   margin: 0 .5rem .6rem .5rem;
-  border-bottom: 2px dotted var(--main-border, silver);
+  border-bottom: 2px dotted var(--dash-color);
 }
 
 @media all and (max-width: 576px) {
diff --git a/assets/css/home.scss b/assets/css/home.scss
index a3e3fc0..ba55a4d 100644
--- a/assets/css/home.scss
+++ b/assets/css/home.scss
@@ -8,6 +8,7 @@
   MIT License
 */
 
+
 #post-list {
   margin-top: 1rem;
   padding-right: .5rem;
@@ -28,7 +29,7 @@
 .post-preview {
   padding-top: 1.5rem;
   padding-bottom: 1rem;
-  border-bottom: 1px solid rgba(158, 158, 158, 0.17);
+  border-bottom: 1px solid var(--main-border-color);
   >h1 {
     font-size: 1.4rem;
     margin: 0;
@@ -39,7 +40,7 @@
   .post-content {
     margin-top: .6rem;
     margin-bottom: .6rem;
-    color: var(--text-color, dimgray);
+    color: var(--post-list-text-color);
     >p { /* Make preview shorter in Home page*/
       margin: 0;
       overflow: hidden;
@@ -53,7 +54,7 @@
 
 .page-item {
   .page-link {
-    color: var(--text-color, #555555);
+    color: var(--btn-patinator-text-color);
     width: 2.5rem;
     height: 2.5rem;
     padding: 0;
@@ -65,23 +66,23 @@
     -webkit-box-align: center;
     align-items: center;
     border-radius: 50%;
-    border: 1px solid var(--main-border, #f1f1f1);
+    border: 1px solid var(--btn-paginator-border-color);
     font-family: 'Lato', sans-serif;
     background-color: var(--button-bg);
   }
   &.active {
     .page-link {
-      background-color: var(--btn-active-bg, #2a408e);
-      border-color: var(--btn-active-border-color, #007bff);
-      box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
-      color: var(--text-color, #f8f8f8);
+      background-color: var(--btn-active-bg);
+      border-color: var(--btn-active-border-color);
+      box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important;
+      color: var(--btn-text-color);
     }
   }
   &.disabled {
     cursor: not-allowed;
     .page-link {
       color: rgba(108, 117, 125, 0.57);
-      border-color: var(--main-border, #f1f1f1);
+      border-color: var(--btn-paginator-border-color);
       background-color: var(--button-bg);
     }
   }
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 57335dd..1c00c2e 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -9,9 +9,48 @@
 */
 
 @import "_fonts";
-@import "_dark/dark-main";
 @import "_module";
 @import "_variables";
+@import "_colors/light-typography";
+@import "_colors/dark-typography";
+
+@mixin set-visible($light-display, $dark-display) {
+  [light-mode-invisible] {
+    display: $light-display;
+  }
+
+  [dark-mode-invisible] {
+    display: $dark-display;
+  }
+}
+
+@mixin mode-toggle($dark-mode: false) {
+  @if $dark-mode {
+    @include set-visible(inline-block, none);
+    @include dark-scheme;
+  } @else {
+    @include set-visible(none, inline-block);
+    @include light-scheme;
+  }
+}
+
+html:not([mode]), html[mode=light] {
+  @include mode-toggle();
+}
+
+html[mode=dark] {
+  @include mode-toggle(true);
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not([mode]), html[mode=dark] {
+    @include mode-toggle(true);
+  }
+
+  html[mode=light] {
+    @include mode-toggle();
+  }
+}
 
 html, body {
   height: 100%;
@@ -25,8 +64,8 @@ html {
 
 body {
   line-height: 1.75rem;
-  background: var(--main-wrapper-bg, #fafafa);
-  color: var(--text-color, #212529);
+  background: var(--body-bg);
+  color: var(--text-color);
   -webkit-font-smoothing: antialiased;
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
@@ -49,8 +88,7 @@ $tab-count: {{ site.data.tabs | size }};
   -webkit-transition: transform 0.4s ease;
   transition: transform 0.4s ease;
   background: rgb(42, 30, 107);
-  background: var(--sidebar-bg,
-  radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%));
+  background: var(--sidebar-bg);
   a {
     @include sidebar-icon;
   }
@@ -95,7 +133,7 @@ $tab-count: {{ site.data.tabs | size }};
         right: 1px;
         width: 3px;
         height: $tab-cursor-height;
-        background-color: var(--nav-cursor, #fcfcfc);
+        background-color: var(--nav-cursor-color);
         pointer-events: none;
       }
     }
@@ -263,7 +301,7 @@ $tab-count: {{ site.data.tabs | size }};
   z-index: 50;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
-  background-color: var(--topbar-wrapper-bg, white);
+  background-color: var(--topbar-wrapper-bg);
 }
 
 #topbar i { // icons
@@ -296,14 +334,14 @@ $tab-count: {{ site.data.tabs | size }};
   display: flex;
   width: 95%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-bg, #fff);
-  background: var(--search-wrapper-bg, #f5f5f5);
+  border: 1px solid var(--search-wrapper-bg);
+  background: var(--search-wrapper-bg);
   padding: 0 .5rem;
   transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
   i {
     z-index: 2;
     font-size: .9rem;
-    color: var(--search-icon, #c2c6cc);
+    color: var(--search-icon-color);
   }
   .fa-times-circle { /* button 'clean up' */
     visibility: hidden;
@@ -311,7 +349,7 @@ $tab-count: {{ site.data.tabs | size }};
 }
 
 #search-cancel { /* 'Cancel' link */
-  color: var(--link-color, #2a408e);
+  color: var(--link-color);
   margin-left: 1rem;
   display: none;
 }
@@ -343,7 +381,7 @@ $tab-count: {{ site.data.tabs | size }};
     display: inline-block;
     line-height: 1rem;
     font-size: 1rem;
-    background: var(--tag-bg, #f8f9fa);
+    background: var(--search-tag-bg);
     border: none;
     padding: .5rem;
     margin: 0 1rem 1rem 0;
@@ -390,7 +428,7 @@ $tab-count: {{ site.data.tabs | size }};
   font-size: 1.1rem;
   font-weight: 600;
   font-family: sans-serif;
-  color: var(--text-color, rgb(78, 78, 78));
+  color: var(--topbar-text-color);
   text-align: center;
   width: 70%;
   overflow: hidden;
@@ -408,7 +446,7 @@ $tab-count: {{ site.data.tabs | size }};
   left: 0;
   height: 100%;
   width: 100%;
-  background: var(--mask-bg, #c1c3c5);
+  background: var(--mask-bg);
   opacity: 0.5;
   z-index: 1;
   @at-root .sidebar-expand~& {
@@ -419,7 +457,7 @@ $tab-count: {{ site.data.tabs | size }};
 /*--- main wrapper ---*/
 
 #main-wrapper {
-  background-color: var(--main-wrapper-bg, white);
+  background-color: var(--main-wrapper-bg);
   position: relative;
   min-height: 100%;
   padding-bottom: $footer-height;
@@ -462,12 +500,12 @@ footer {
   height: $footer-height;
   font-size: 0.8rem;
   color: #7a7b7d;
-  background-color: var(--main-wrapper-bg, #ffffff);
+  background-color: var(--footer-bg-color);
   >div.d-flex {
     line-height: 1.2rem;
     width: 95%;
     max-width: 1045px;
-    border-top: 1px solid var(--footer-border, #f3f3f3);
+    border-top: 1px solid var(--main-border-color);
     margin-bottom: 1rem;
     >div {
       width: 350px;
@@ -511,7 +549,7 @@ footer {
   }
   >div {
     padding-left: 1rem;
-    border-left: 1px solid rgba(158, 158, 158, 0.17);
+    border-left: 1px solid var(--main-border-color);
     &:not(:first-child) {
       margin-top: 4rem;
     }
@@ -540,7 +578,7 @@ footer {
     line-height: 1rem;
     font-size: 0.85rem;
     background: none;
-    border: 1px solid var(--main-border, #e9ecef);
+    border: 1px solid var(--btn-border-color);
     border-radius: .8rem;
     padding: .3rem .5rem;
     margin: 0 .35rem .5rem 0;
@@ -584,12 +622,12 @@ footer {
   z-index: 1;
   cursor: pointer;
   position: fixed;
-  background: var(--button-bg, #fff);
-  color: var(--text-color, #686868);
+  background: var(--button-bg);
+  color: var(--btn-backtotop-color);
   height: 2.6em;
   width: 2.7em;
   border-radius: 50%;
-  border: 1px solid var(--main-border, #f1f1f1);
+  border: 1px solid var(--btn-backtotop-border-color);
   transition: 0.2s ease-out;
   -webkit-transition: 0.2s ease-out;
 }
@@ -630,12 +668,12 @@ h5 {
 }
 
 blockquote {
-  border-left: 5px solid var(--blockquote-border, #eee);
+  border-left: 5px solid var(--blockquote-border-color);
   padding-left: 1rem;
-  color: var(--blockquote-text, #9a9a9a);
+  color: var(--blockquote-text-color);
   .post-content & {
     a {
-      color: var(--link-color, #2a408e);
+      color: var(--link-color);
     }
   }
 }
@@ -660,7 +698,7 @@ sup {
       margin-bottom: -.8rem;
     }
     &:target>p {
-      background-color: var(--footnote-target-bg, lightcyan);
+      background-color: var(--footnote-target-bg);
       width: fit-content;
       -webkit-transition: background-color 1.5s ease-in-out;
       /* Safari prior 6.1 */
@@ -677,7 +715,7 @@ sup {
     transition: background-color 1.5s ease-in-out;
   }
   @at-root sup:target>a#{&} {
-    background-color: var(--footnote-target-bg, lightcyan);
+    background-color: var(--footnote-target-bg);
     padding: 0 2px;
   }
 }
@@ -768,10 +806,10 @@ table {
         background-color: var(--tb-even-bg);
       }
       &:last-child:nth-child(2n) {
-        border-bottom: solid 1px var(--tb-odd-bg, rgba(210, 215, 217, 0.75));
+        border-bottom: solid 1px var(--tb-even-border-color);
       }
       &:nth-child(2n + 1) {
-        background-color: var(--tb-odd-bg, #f8f9fa);
+        background-color: var(--tb-odd-bg);
       }
     }
     th {
@@ -796,8 +834,8 @@ table {
   font-size: 0.85rem;
   word-spacing: 1px;
   a {
-    color: var(--link-color, #2a408e);
-    border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
+    color: var(--link-color);
+    border-bottom: 1px dotted var(--link-underline-color);
     &:not(:last-child) {
       margin-right: 2px;
     }
@@ -815,7 +853,7 @@ table {
   word-wrap: break-word;
   a {
     @extend %link-color;
-    border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
+    border-bottom: 1px dotted var(--link-underline-color);
     &:hover {
       @extend %link-hover;
     }
@@ -830,7 +868,7 @@ table {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  background: var(--tag-bg, rgba(0, 0, 0, 0.075));
+  background: var(--tag-bg);
   border-radius: .34rem;
   padding: 0 .4rem;
   color: #818182;
@@ -885,7 +923,7 @@ table {
 }
 
 .btn-box-shadow {
-  box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #eaeaea) !important;
+  box-shadow: 0 0 8px 0 var(--btn-box-shadow)!important;
 }
 
 .topbar-up {
@@ -914,7 +952,7 @@ table {
 
 .input-focus {
   box-shadow: none;
-  border-color: var(--input-focus-border, #e9ecef) !important;
+  border-color: var(--input-focus-border-color) !important;
   background: center !important;
 }
 
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 2853c76..e1cdeae 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -7,22 +7,23 @@
   © 2019 Cotes Chung
   MIT License
 */
+@import "_variables";
 
 $prompt-older: "{{ site.data.label.post.button.previous }}";
 $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 @mixin btn-sharing-color($light-color, $important: false) {
   @if $important {
-    color: var(--btn-sharing, $light-color)!important;
+    color: var(--btn-share-color, $light-color)!important;
   } @else {
-    color: var(--btn-sharing, $light-color);
+    color: var(--btn-share-color, $light-color);
   }
 }
 
 @mixin btn-post-nav {
   width: 50%;
   position: relative;
-  border-color: var(--main-border, #e9ecef);
+  border-color: var(--btn-border-color);
 }
 
 .post img {
@@ -40,7 +41,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 .post-tail-wrapper {
   margin-top: 5rem;
-  border-bottom: 1px double var(--main-border, #e9ecef);
+  border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
 
@@ -50,7 +51,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
   .btn {
     @include btn-post-nav;
-    color: var(--link-color, #2a408e);
+    color: var(--link-color);
     &:hover {
       background: #2a408e;
       color: #fff;
@@ -80,7 +81,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
   a, span {
     &::before {
-      color: var(--text-muted-color, gray);
+      color: var(--text-muted-color);
       font-size: .65rem;
       text-transform: uppercase;
     }
@@ -149,14 +150,14 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     font-family: 'Oswald', sans-serif;
   }
   .card {
-    border: 1px solid var(--main-wrapper-bg, #f1f1f1);
+    border: 1px solid var(--card-border-color);
     background-color: var(--card-bg);
-    box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922));
+    box-shadow: 0 0 5px 0 var(--card-box-shadow);
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
     h3 {
-      color: var(--relate-post-title, #353a3d);
+      color: var(--label-relate-post);
     }
     &:hover {
       -webkit-transform: translate3d(0, -3px, 0);
@@ -166,7 +167,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   }
 
   .timeago {
-    color: var(--text-muted-color, rgba(30, 55, 70, .4));
+    color: var(--relate-post-date);
   }
 
   p {
@@ -208,18 +209,24 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   color: inherit;
 }
 
+%btn-share-hovor {
+  color: var(--btn-share-hover-color)!important;
+}
+
 .share-wrapper {
   vertical-align: middle;
   user-select: none;
-
-  a:hover,
-  i:hover {
-    @include btn-sharing-color(#2a408e, true);
-    text-decoration: none;
-  }
-
   .share-icon {
     font-size: 1.2rem;
+    a:hover {
+      text-decoration: none;
+      >i {
+        @extend %btn-share-hovor;
+      }
+    }
+    i:hover {
+      @extend %btn-share-hovor;
+    }
     .fab {
       &.fa-twitter {
         @include btn-sharing-color(rgba(29, 161, 242, 1.00));
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 06b3d47..f88267a 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -8,77 +8,38 @@
 * MIT Licensed
 */
 
-@import "_dark/dark-syntax";
+@import "_colors/light-syntax";
+@import "_colors/dark-syntax";
 
-/* the fallback color from https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */
-.highlight pre { background-color: var(--highlight-pre-bg) }
-.highlight .hll { background-color: var(--highlight-hll-bg, #ffffcc) }
-.highlight .c { color: var(--highlight-c, #999988); font-style: italic } /* Comment */
-.highlight .err { color: var(--highlight-err, #a61717); background-color: var(--highlight-err-bg, #e3d2d2) } /* Error */
-.highlight .k { color: var(--highlight-k, #000000); font-weight: bold } /* Keyword */
-.highlight .o { color: var(--highlight-o, #000000); font-weight: bold } /* Operator */
-.highlight .cm { color: var(--highlight-cm, #999988); font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: var(--highlight-cp, #999999); font-weight: bold; font-style: italic } /* Comment.Preproc */
-.highlight .c1 { color: var(--highlight-c1, #999988); font-style: italic } /* Comment.Single */
-.highlight .cs { color: var(--highlight-cs, #999999); font-weight: bold; font-style: italic } /* Comment.Special */
-.highlight .gd { color: var(--highlight-gd, #000000); background-color: var(#ffdddd) } /* Generic.Deleted */
-.highlight .ge { color: var(--highlight-ge, #000000); font-style: italic } /* Generic.Emph */
-.highlight .gr { color: var(--highlight-gr, #aa0000) } /* Generic.Error */
-.highlight .gh { color: var(--highlight-gh, #999999) } /* Generic.Heading */
-.highlight .gi { color: var(--highlight-gi, #000000); background-color: #ddffdd } /* Generic.Inserted */
-.highlight .go { color: var(#888888) } /* Generic.Output */
-.highlight .gp { color: var(#555555) } /* Generic.Prompt */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: var(--highlight-gu, #aaaaaa) } /* Generic.Subheading */
-.highlight .gt { color: var(--highlight-gt, #aa0000) } /* Generic.Traceback */
-.highlight .kc { color: var(--highlight-kc, #000000); font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: var(--highlight-kd, #000000); font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: var(--highlight-kn, #000000); font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: var(--highlight-kp, #000000); font-weight: bold } /* Keyword.Pseudo */
-.highlight .kr { color: var(--highlight-kr, #000000); font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: var(--highlight-kt, #445588); font-weight: bold } /* Keyword.Type */
-.highlight .m { color: var(--highlight-m, #009999) } /* Literal.Number */
-.highlight .s { color: var(--highlight-s, #d01040) } /* Literal.String */
-.highlight .na { color: var(--highlight-na, #008080) } /* Name.Attribute */
-.highlight .nb { color: var(--highlight-nb, #0086B3) } /* Name.Builtin */
-.highlight .nc { color: var(--highlight-nc, #445588); font-weight: bold } /* Name.Class */
-.highlight .no { color: var(--highlight-no, #008080) } /* Name.Constant */
-.highlight .nd { color: var(--highlight-nd, #3c5d5d); font-weight: bold } /* Name.Decorator */
-.highlight .ni { color: var(--highlight-ni, #800080) } /* Name.Entity */
-.highlight .ne { color: var(--highlight-ne, #990000); font-weight: bold } /* Name.Exception */
-.highlight .nf { color: var(--highlight-nf, #990000); font-weight: bold } /* Name.Function */
-.highlight .nl { color: var(--highlight-nl, #990000); font-weight: bold } /* Name.Label */
-.highlight .nn { color: var(--highlight-nn, #555555) } /* Name.Namespace */
-.highlight .nt { color: var(--highlight-nt, #000080) } /* Name.Tag */
-.highlight .nv { color: var(--highlight-nv, #008080) } /* Name.Variable */
-.highlight .ow { color: var(--highlight-ow, #000000); font-weight: bold } /* Operator.Word */
-.highlight .w { color: var(--highlight-w, #bbbbbb) } /* Text.Whitespace */
-.highlight .mf { color: var(--highlight-mf, #009999) } /* Literal.Number.Float */
-.highlight .mh { color: var(--highlight-mh, #009999) } /* Literal.Number.Hex */
-.highlight .mi { color: var(--highlight-mi, #009999) } /* Literal.Number.Integer */
-.highlight .mo { color: var(--highlight-mo, #009999) } /* Literal.Number.Oct */
-.highlight .sb { color: var(--highlight-sb, #d01040) } /* Literal.String.Backtick */
-.highlight .sc { color: var(--highlight-sc, #d01040) } /* Literal.String.Char */
-.highlight .sd { color: var(--highlight-sd, #d01040) } /* Literal.String.Doc */
-.highlight .s2 { color: var(--highlight-s2, #d01040) } /* Literal.String.Double */
-.highlight .se { color: var(--highlight-se, #d01040) } /* Literal.String.Escape */
-.highlight .sh { color: var(--highlight-sh, #d01040) } /* Literal.String.Heredoc */
-.highlight .si { color: var(--highlight-si, #d01040) } /* Literal.String.Interpol */
-.highlight .sx { color: var(--highlight-sx, #d01040) } /* Literal.String.Other */
-.highlight .sr { color: var(--highlight-sr, #009926) } /* Literal.String.Regex */
-.highlight .s1 { color: var(--highlight-s1, #d01040) } /* Literal.String.Single */
-.highlight .ss { color: var(--highlight-ss, #990073) } /* Literal.String.Symbol */
-.highlight .bp { color: var(--highlight-bp, #999999) } /* Name.Builtin.Pseudo */
-.highlight .vc { color: var(--highlight-vc, #008080) } /* Name.Variable.Class */
-.highlight .vg { color: var(--highlight-vg, #008080) } /* Name.Variable.Global */
-.highlight .vi { color: var(--highlight-vi, #008080) } /* Name.Variable.Instance */
-.highlight .il { color: var(--highlight-il, #009999) } /* Literal.Number.Integer.Long */
 
+@mixin highlight-box-shadow($val) {
+  -moz-box-shadow: $val;
+  -webkit-box-shadow: $val;
+  box-shadow: $val;
+}
+
+html:not([mode]), html[mode=light] {
+  @include light-syntax;
+}
+
+html[mode=dark] {
+  @include dark-syntax;
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not([mode]), html[mode=dark] {
+    @include dark-syntax;
+  }
+
+  html[mode=light] {
+    @include light-syntax;
+  }
+}
 
 /*-- Codes Snippet --*/
 
 %highlight-pre-bg {
-  background: var(--highlight-pre-bg, #f7f7f7)
+  background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
@@ -86,29 +47,28 @@
 }
 
 .highlighter-rouge {
-  @extend %highlight-pre-bg;
+  background: var(--highlight-bg-color);
   @extend %code-snippet-radius;
-  color: var(--highlighter-rouge, black);
+  color: var(--highlighter-rouge-color);
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
 .highlight {
   @extend %code-snippet-radius;
-  @at-root div#{&} {
-    @extend %highlight-pre-bg;
-  }
+  background: var(--highlight-bg-color);
+
   @at-root figure#{&} {
-    @extend %highlight-pre-bg;
+    background: var(--highlight-bg-color);
   }
   overflow: auto;
-  @include box-shadow(inset 0 0 2px #c2c6cc);
+  @include highlight-box-shadow(inset 0 0 2px #c2c6cc);
   .lineno {
     margin: .8rem 0rem;
     padding: 0 .5rem;
     min-width: 2.2rem;
     text-align: right;
-    color: var(--highlight-lineno, #c2c6cc);
-    border-right: 1px solid var(--highlight-lineno-border, #e9ecef);
+    color: var(--highlight-lineno-color);
+    border-right: 1px solid var(--highlight-lineno-border-color);
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
@@ -136,7 +96,7 @@
     /* Fixed Safari overflow-x */
   }
 
-} // .highlight
+} //.highlight
 
 code {
   -webkit-hyphens: none;
@@ -147,7 +107,7 @@ code {
     padding: 2px 4px;
     margin: 0 .3rem;
     border-radius: 4px;
-    border: 1px solid var(--highlight-pre-bg, #e9ecef);
+    border: 1px solid var(--code-highlighter-rouge); //var(--highlight-pre-bg, #e9ecef);
   }
 }
 
@@ -157,24 +117,15 @@ td.rouge-code {
 }
 
 /* Hide line numbers for defualt, console, and terminal code snippets */
-div[class^='highlighter-rouge'] pre.lineno,
-div.language-console.highlighter-rouge pre.lineno,
-div.language-terminal.highlighter-rouge pre.lineno {
-  display: none;
-}
-
-div[class^='highlighter-rouge'] td.rouge-code,
-div.language-console.highlighter-rouge td.rouge-code,
-div.language-terminal.highlighter-rouge td.rouge-code {
-  padding: .8rem 1rem;
-}
-
-html[mode=dark] {
-  @include dark-syntax-scheme;
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not([mode]), html[mode=dark] {
-    @include dark-syntax-scheme;
+div {
+  &[class^='highlighter-rouge'],
+  &.language-console.highlighter-rouge,
+  &.language-terminal.highlighter-rouge {
+    pre.lineno {
+      display: none;
+    }
+    td.rouge-code {
+      padding: .8rem 1rem;
+    }
   }
 }
diff --git a/assets/css/tags.scss b/assets/css/tags.scss
index 3f4b3fd..cad54f3 100644
--- a/assets/css/tags.scss
+++ b/assets/css/tags.scss
@@ -15,8 +15,8 @@
   margin-right: .8rem;
   line-height: 3rem;
   letter-spacing: 0;
-  border: 1px solid var(--tag-border, #dee2e6) !important;
-  box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef);
+  border: 1px solid var(--tag-border) !important;
+  box-shadow: 0 0 3px 0 var(--tag-shadow);
   span {
     margin-left: 0.6em;
     font-size: 0.7em;