Another super feature: auto dark mode!

_includes/topbar.html

@@ -5,7 +5,7 @@
   © 2017-2019 Cotes Chung
   MIT License
 -->
-<div id="topbar-wrapper" class="row justify-content-center bg-white topbar-down">
+<div id="topbar-wrapper" class="row justify-content-center topbar-down">
   <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
     <span id="breadcrumb">
       {% for item in page.breadcrumb %}

_layouts/default.html

@@ -16,7 +16,7 @@ layout: compress
     <div id="sidebar" class="d-flex flex-column">
       {% include sidebar.html %}
     </div>
-    <div id="main-wrapper" class="bg-white">
+    <div id="main-wrapper">
       {% include topbar.html %}
       <div id="main">
 

_layouts/page.html

@@ -7,7 +7,7 @@ layout: default
 # MIT License
 ---
 
-<div class="row bg-white">
+<div class="row">
   <div class="col-12 col-lg-11 col-xl-8">
     <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
     {% if page.dynamic_title %}

assets/css/_dark/dark-main.scss

@@ -0,0 +1,53 @@
+/*!
+* The main dark mode styles
+* v2.0
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2018-2019 Cotes Chung
+* MIT Licensed
+*/
+
+@media (prefers-color-scheme: dark) {
+  html {
+    /* framework */
+    --main-wrapper-bg: rgb(27, 27, 30);
+    --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-bg: rgb(31, 30, 30);
+    --footer-border: rgb(44, 45, 45);
+    --mask-bg: rgb(68, 69, 70);
+
+    /* sidebar */
+    --nav-cursor: rgb(183, 182, 182);
+    --sidebar-bg: radial-gradient(circle, #231c4c 0%, #1d1f27 100%);
+
+    /* common color */
+    --text-color: rgb(175, 176, 177);
+    --link-color: rgb(138, 180, 248);
+    --main-border: rgb(63, 65, 68);
+    --button-bg: rgb(39, 40, 33);
+    --blockquote-border: rgb(93, 95, 82);
+    --blockquote-text: rgb(96, 125, 139);
+
+    --card-bg: rgb(39, 40, 33);
+    --card-header-bg: rgb(51, 50, 50);
+    --relate-post-title: rgb(164, 175, 181);
+
+    /* posts */
+    --toc-highlight: rgb(116, 178, 243);
+    --tag-bg: rgb(41, 40, 40);
+    --tag-hover: rgb(43, 56, 62);
+    --tb-odd-bg: rgb(50, 51, 41); /* posts' table odd line */
+
+    /* tags */
+    --tag-border: rgb(59, 79, 88);
+    --tag-shadow: rgb(32, 33, 33);
+
+    /* categories */
+    --categories-hover-bg: rgb(73, 75, 76);
+
+    /* archives */
+    --timeline-node-bg: rgb(150, 152, 156);
+  }
+}

assets/css/_dark/dark-syntax.scss

@@ -0,0 +1,85 @@
+/*!
+* The syntax dark mode styles
+* v2.0
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2018-2019 Cotes Chung
+* MIT Licensed
+*/
+
+@media (prefers-color-scheme: dark) {
+  html {
+    /* 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;
+  }
+
+  pre {
+    color: #818c96; /* override Bootstrap */
+  }
+
+}

assets/css/archives.scss

@@ -18,7 +18,7 @@
 }
 
 #archives li:nth-child(odd) {
-  background-color: #fff;
+  background-color: var(--main-wrapper-bg, #fff);
   background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
 }
 
@@ -56,8 +56,8 @@
   top: -26px;
   left: 63px;
   border: 3px solid;
-  background-color: #ffffff;
+  background-color: var(--main-border, #ffffff);
-  border-color: #c2c6cc;
+  border-color: var(--timeline-node-bg, #c2c6cc);
   box-shadow: 0 0 2px 0 #c2c6cc;
   z-index: 1;
 }
@@ -103,7 +103,7 @@
   float: left;
   top: 1.35rem;
   left: 69px;
-  background-color: #c2c6cc;
+  background-color: var(--timeline-node-bg, #c2c6cc);
   box-shadow: 0 0 3px 0 #c2c6cc;
   z-index: 1;
 }
@@ -117,7 +117,7 @@
   display: inline-block;
   float: left;
   position: relative;
-  background-color: rgba(0, 0, 0, 0.075);
+  background-color: var(--main-border, rgba(0, 0, 0, 0.075));
 }
 
 #archives ul>li::after {
@@ -139,7 +139,6 @@
 }
 
 @media all and (max-width: 576px) {
-
   #archives {
     margin-top: -1rem;
   }
@@ -148,3 +147,10 @@
     letter-spacing: 0;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  #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));
+  }
+}

assets/css/categories.scss

@@ -48,7 +48,7 @@
 
 @media (hover: hover) { // only works on desktop
   .category-trigger:hover {
-    background-color: #e9ecef;
+    background-color: var(--categories-hover-bg, #e9ecef);
   }
 }
 
@@ -64,3 +64,21 @@
   -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
 }
+
+@media (prefers-color-scheme: dark) {
+  .categories.card,
+  .list-group-item {
+    background-color: var(--card-bg);
+  }
+
+  .categories .card-header {
+    background-color: var(--card-header-bg);
+  }
+
+  .categories .list-group-item {
+    border-left: none;
+    border-right: none;
+    padding-left: 2rem;
+    border-color: var(--main-border);
+  }
+}

assets/css/category-tag.scss

@@ -53,7 +53,7 @@
 
 .dash {
   margin: 0 .5rem .6rem .5rem;
-  border-bottom: 2px dotted silver;
+  border-bottom: 2px dotted var(--main-border, silver);
 }
 
 @media all and (max-width: 576px) {

assets/css/home.scss

@@ -41,7 +41,7 @@
 .post-preview .post-content {
   margin-top: .6rem;
   margin-bottom: .6rem;
-  color: dimgray;
+  color: var(--text-color, dimgray);
 }
 
 /* Make preview shorter in Home page*/
@@ -67,19 +67,21 @@
   -webkit-box-align: center;
   align-items: center;
   border-radius: 50%;
-  border: 1px solid #f1f1f1;
+  border: 1px solid var(--main-border, #f1f1f1);
   font-family: 'Lato', sans-serif;
+  background-color: var(--button-bg);
 }
 
 .page-item.active .page-link {
   background-color: #2a408e;
-  box-shadow: 0 0 8px 0 #4b92d2 !important;
+  box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
-  color: #f8f8f8;
+  color: var(--text-color, #f8f8f8);
 }
 
 .page-item.disabled .page-link {
   color: rgba(108, 117, 125, 0.57);
-  border-color: #f1f1f1;
+  border-color: var(--main-border, #f1f1f1);
+  background-color: var(--button-bg);
 }
 
 .page-item.disabled {
@@ -130,3 +132,10 @@
     padding-right: 0;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .page-item.active .page-link {
+    background-color: #203a96;
+    border-color: #0252a9;
+  }
+}

assets/css/main.scss

@@ -9,6 +9,7 @@
 */
 
 @import "_fonts";
+@import "_dark/dark-main";
 
 html, body {
   height: 100%;
@@ -23,7 +24,7 @@ html {
 body {
   line-height: 1.75rem;
   background: #fafafa;
-  color: #212529;
+  color: var(--text-color, #212529);
   -webkit-font-smoothing: antialiased;
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
@@ -43,7 +44,8 @@ body {
   -webkit-transition: transform 0.4s ease;
   transition: transform 0.4s ease;
   background: rgb(42, 30, 107);
-  background: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
+  background: var(--sidebar-bg,
+    radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%));
 }
 
 #sidebar a {
@@ -122,7 +124,7 @@ body {
   position: relative;
   width: 3px;
   height: 26px;
-  background: #fcfcfc;;
+  background-color: var(--nav-cursor, #fcfcfc);
   pointer-events: none;
 }
 
@@ -245,6 +247,7 @@ body {
   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);
 }
 
 #topbar i { // icons
@@ -271,8 +274,8 @@ body {
   display: flex;
   width: 95%;
   border-radius: 1rem;
-  border: 1px solid #fff;
+  border: 1px solid var(--search-wrapper-bg, #fff);
-  background: #f5f5f5;
+  background: var(--search-wrapper-bg, #f5f5f5);
   padding: 0 .5rem;
   transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
 }
@@ -280,7 +283,7 @@ body {
 #search-wrapper i {
   z-index: 2;
   font-size: .9rem;
-  color: #c2c6cc;
+  color: var(--search-icon, #c2c6cc);
 }
 
 #search-wrapper .fa-times-circle { /* button 'clean up' */
@@ -298,6 +301,7 @@ body {
   border: 0;
   border-radius: 0;
   padding: .18rem .3rem;
+  color: var(--text-color);
 }
 
 #search-input:focus {
@@ -318,7 +322,7 @@ body {
   display: inline-block;
   line-height: 1rem;
   font-size: 1rem;
-  background: #f8f9fa;
+  background: var(--tag-bg, #f8f9fa);
   border: none;
   padding: .5rem;
   margin: 0 1rem 1rem 0;
@@ -366,7 +370,7 @@ body {
   font-size: 1.1rem;
   font-weight: 600;
   font-family: sans-serif;
-  color: rgb(78, 78, 78);
+  color: var(--text-color, rgb(78, 78, 78));
   text-align: center;
   width: 70%;
   overflow: hidden;
@@ -384,7 +388,7 @@ body {
   left: 0;
   height: 100%;
   width: 100%;
-  background: #c1c3c5;
+  background: var(--mask-bg, #c1c3c5);
   opacity: 0.5;
   z-index: 1;
 }
@@ -396,6 +400,7 @@ body {
 /*--- main wrapper ---*/
 
 #main-wrapper {
+  background-color: var(--main-wrapper-bg, white);//rgb(27, 27, 30);
   position: relative;
   min-height: 100%;
   padding-bottom: 6rem; /* equals to or greatter than footer's height */
@@ -435,7 +440,8 @@ footer {
   padding: 1rem;
   font-size: 0.8rem;
   color: #7a7b7d;
-  background: #f3f3f3;
+  background-color: var(--footer-bg, #f3f3f3);
+  border-top: 1px solid var(--footer-border, #f3f3f3);
 }
 
 footer>div.d-flex {
@@ -512,7 +518,7 @@ footer .license a {
   line-height: 1rem;
   font-size: 0.85rem;
   background: none;
-  border: 1px solid #e9ecef;
+  border: 1px solid var(--main-border, #e9ecef);
   border-radius: .8rem;
   padding: .3rem .5rem;
   margin: 0 .35rem .5rem 0;
@@ -546,12 +552,12 @@ footer .license a {
   z-index: 1;
   cursor: pointer;
   position: fixed;
-  background: #fff;
+  background: var(--button-bg, #fff);
   color: #686868;
   height: 2.6em;
   width: 2.7em;
   border-radius: 50%;
-  border: 1px solid #f1f1f1;
+  border: 1px solid var(--main-border, #f1f1f1);
   transition: 0.2s ease-out;
   -webkit-transition: 0.2s ease-out;
 }
@@ -591,13 +597,13 @@ h2, h3, h4 {
 }
 
 blockquote {
-  border-left: 5px solid #eee;
+  border-left: 5px solid var(--blockquote-border, #eee);
   padding-left: 1rem;
-  color: #9a9a9a;
+  color: var(--blockquote-text, #9a9a9a);
 }
 
 .post-content blockquote a {
-  color: #2a408e;
+  color: var(--link-color, #2a408e);
 }
 
 kbd {
@@ -655,8 +661,8 @@ a.reversefootnote {
 }
 
 .post-content a {
-  color: #2a408e;
+  color: var(--link-color, #2a408e);
-  border-bottom: 1px dotted #c2c6cc;
+  border-bottom: 1px dotted var(--link-color, #c2c6cc);
 }
 
 p>a, span>a,
@@ -667,7 +673,7 @@ p>a, span>a,
 #page-tag a,
 #archives a,
 #search-results a {
-  color: #2a408e;
+  color: var(--link-color, #2a408e);
 }
 
 .categories a,
@@ -717,11 +723,11 @@ table thead {
 }
 
 table thead+tbody tr {
-  border-bottom: solid 1px rgba(210, 215, 217, 0.75);
+  border-bottom: solid 1px var(--tb-odd-bg, rgba(210, 215, 217, 0.75));
 }
 
 table thead+tbody tr:nth-child(2n + 1) {
-  background-color: #f8f9fa;
+  background-color: var(--tb-odd-bg, #f8f9fa);
 }
 
 table thead th,
@@ -742,8 +748,8 @@ table tbody td {
 }
 
 .post-meta a {
-  color: #2a408e;
+  color: var(--link-color, #2a408e);
-  border-bottom: 1px dotted #c2c6cc;
+  border-bottom: 1px dotted var(--link-color, #c2c6cc);
 }
 
 .post-meta a:not(:last-child) {
@@ -762,7 +768,7 @@ table tbody td {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  background: rgba(0, 0, 0, 0.075);
+  background: var(--tag-bg, rgba(0, 0, 0, 0.075));
   border-radius: .34rem;
   padding: 0 .4rem;
   margin: 0 .1rem;
@@ -772,7 +778,7 @@ table tbody td {
 
 .tag:hover,
 .post-tag:hover {
-  background: rgb(222, 226, 230);
+  background: var(--tag-hover, rgb(222, 226, 230));
   transition: background 0.35s ease-in-out;
 }
 
@@ -815,7 +821,7 @@ table tbody td {
 }
 
 .btn-box-shadow {
-  box-shadow: 0 0 8px 0 #eaeaea!important;
+  box-shadow: 0 0 8px 0 var(--button-bg, #eaeaea) !important;
 }
 
 .topbar-up {
@@ -843,7 +849,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 
 .input-focus {
   box-shadow: none;
-  border-color: #e9ecef !important;
+  border-color: var(--input-focus-border, #e9ecef) !important;
   background: center !important;
 }
 

assets/css/post.scss

@@ -23,7 +23,7 @@
 
 .post-tail {
   margin-top: 3.5rem;
-  border-bottom: 1px double #e9ecef;
+  border-bottom: 1px double var(--main-border, #e9ecef);
   font-size: 0.85rem;
 }
 
@@ -36,8 +36,8 @@
 .post-navigation .btn.disabled {
   width: 50%;
   position: relative;
-  color: #2a408e;
+  color: var(--link-color, #2a408e);
-  border-color: #e9ecef;
+  border-color: var(--main-border, #e9ecef);
 }
 
 .post-navigation .btn:hover {
@@ -51,7 +51,7 @@
   cursor: not-allowed;
   background: none;
   color: gray;
-  border-color: #e9ecef;
+  border-color: var(--main-border, #e9ecef);
 }
 
 .post-navigation a.btn.btn-outline-primary.disabled:focus {
@@ -138,8 +138,9 @@
 }
 
 #related-posts .card {
-  border: 1px solid #f1f1f1;
+  border: 1px solid var(--main-wrapper-bg, #f1f1f1);
-  box-shadow: 0 0 5px 0 rgba(234, 234, 234, 0.7686274509803922);
+  background-color: var(--card-bg);
+  box-shadow: 0 0 5px 0 var(--main-wrapper-bg, rgba(234, 234, 234, 0.7686274509803922));
   -webkit-transition: all .3s ease-in-out;;
   -moz-transition: all .3s ease-in-out;;
   transition: all .3s ease-in-out;
@@ -152,7 +153,7 @@
 }
 
 #related-posts .card h3 {
-  color: #353a3d;
+  color: var(--relate-post-title, #353a3d);
 }
 
 #related-posts .timeago {
@@ -194,7 +195,6 @@
   min-height: 2rem;
 }
 
-
 @media all and (max-width: 768px) {
   .post img {
     max-width: calc(100% + 1rem);
@@ -266,3 +266,15 @@
     margin-right: calc((100% - 1150px) / 8 + 300px);
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  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;
+  }
+}

assets/css/syntax.scss

@@ -8,68 +8,71 @@
 * MIT Licensed
 */
 
-/* https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */
+@import "_dark/dark-syntax";
-.highlight .hll { background-color: #ffffcc }
+
-.highlight .c { color: #999988; font-style: italic } /* Comment */
+/* the fallback color from https://raw.githubusercontent.com/jwarby/pygments-css/master/github.css */
-.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight pre { background-color: var(--highlight-pre-bg) }
-.highlight .k { color: #000000; font-weight: bold } /* Keyword */
+.highlight .hll { background-color: var(--highlight-hll-bg, #ffffcc) }
-.highlight .o { color: #000000; font-weight: bold } /* Operator */
+.highlight .c { color: var(--highlight-c, #999988); font-style: italic } /* Comment */
-.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .err { color: var(--highlight-err, #a61717); background-color: var(--highlight-err-bg, #e3d2d2) } /* Error */
-.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.highlight .k { color: var(--highlight-k, #000000); font-weight: bold } /* Keyword */
-.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .o { color: var(--highlight-o, #000000); font-weight: bold } /* Operator */
-.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .cm { color: var(--highlight-cm, #999988); font-style: italic } /* Comment.Multiline */
-.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .cp { color: var(--highlight-cp, #999999); font-weight: bold; font-style: italic } /* Comment.Preproc */
-.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
+.highlight .c1 { color: var(--highlight-c1, #999988); font-style: italic } /* Comment.Single */
-.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .cs { color: var(--highlight-cs, #999999); font-weight: bold; font-style: italic } /* Comment.Special */
-.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gd { color: var(--highlight-gd, #000000); background-color: var(#ffdddd) } /* Generic.Deleted */
-.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .ge { color: var(--highlight-ge, #000000); font-style: italic } /* Generic.Emph */
-.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gr { color: var(--highlight-gr, #aa0000) } /* Generic.Error */
-.highlight .gp { color: #555555 } /* Generic.Prompt */
+.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: #aaaaaa } /* Generic.Subheading */
+.highlight .gu { color: var(--highlight-gu, #aaaaaa) } /* Generic.Subheading */
-.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .gt { color: var(--highlight-gt, #aa0000) } /* Generic.Traceback */
-.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.highlight .kc { color: var(--highlight-kc, #000000); font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kd { color: var(--highlight-kd, #000000); font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kn { color: var(--highlight-kn, #000000); font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.highlight .kp { color: var(--highlight-kp, #000000); font-weight: bold } /* Keyword.Pseudo */
-.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kr { color: var(--highlight-kr, #000000); font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .kt { color: var(--highlight-kt, #445588); font-weight: bold } /* Keyword.Type */
-.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .m { color: var(--highlight-m, #009999) } /* Literal.Number */
-.highlight .s { color: #d01040 } /* Literal.String */
+.highlight .s { color: var(--highlight-s, #d01040) } /* Literal.String */
-.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .na { color: var(--highlight-na, #008080) } /* Name.Attribute */
-.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nb { color: var(--highlight-nb, #0086B3) } /* Name.Builtin */
-.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .nc { color: var(--highlight-nc, #445588); font-weight: bold } /* Name.Class */
-.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .no { color: var(--highlight-no, #008080) } /* Name.Constant */
-.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.highlight .nd { color: var(--highlight-nd, #3c5d5d); font-weight: bold } /* Name.Decorator */
-.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ni { color: var(--highlight-ni, #800080) } /* Name.Entity */
-.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .ne { color: var(--highlight-ne, #990000); font-weight: bold } /* Name.Exception */
-.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nf { color: var(--highlight-nf, #990000); font-weight: bold } /* Name.Function */
-.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
+.highlight .nl { color: var(--highlight-nl, #990000); font-weight: bold } /* Name.Label */
-.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nn { color: var(--highlight-nn, #555555) } /* Name.Namespace */
-.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nt { color: var(--highlight-nt, #000080) } /* Name.Tag */
-.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .nv { color: var(--highlight-nv, #008080) } /* Name.Variable */
-.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .ow { color: var(--highlight-ow, #000000); font-weight: bold } /* Operator.Word */
-.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .w { color: var(--highlight-w, #bbbbbb) } /* Text.Whitespace */
-.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mf { color: var(--highlight-mf, #009999) } /* Literal.Number.Float */
-.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mh { color: var(--highlight-mh, #009999) } /* Literal.Number.Hex */
-.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mi { color: var(--highlight-mi, #009999) } /* Literal.Number.Integer */
-.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .mo { color: var(--highlight-mo, #009999) } /* Literal.Number.Oct */
-.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
+.highlight .sb { color: var(--highlight-sb, #d01040) } /* Literal.String.Backtick */
-.highlight .sc { color: #d01040 } /* Literal.String.Char */
+.highlight .sc { color: var(--highlight-sc, #d01040) } /* Literal.String.Char */
-.highlight .sd { color: #d01040 } /* Literal.String.Doc */
+.highlight .sd { color: var(--highlight-sd, #d01040) } /* Literal.String.Doc */
-.highlight .s2 { color: #d01040 } /* Literal.String.Double */
+.highlight .s2 { color: var(--highlight-s2, #d01040) } /* Literal.String.Double */
-.highlight .se { color: #d01040 } /* Literal.String.Escape */
+.highlight .se { color: var(--highlight-se, #d01040) } /* Literal.String.Escape */
-.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
+.highlight .sh { color: var(--highlight-sh, #d01040) } /* Literal.String.Heredoc */
-.highlight .si { color: #d01040 } /* Literal.String.Interpol */
+.highlight .si { color: var(--highlight-si, #d01040) } /* Literal.String.Interpol */
-.highlight .sx { color: #d01040 } /* Literal.String.Other */
+.highlight .sx { color: var(--highlight-sx, #d01040) } /* Literal.String.Other */
-.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .sr { color: var(--highlight-sr, #009926) } /* Literal.String.Regex */
-.highlight .s1 { color: #d01040 } /* Literal.String.Single */
+.highlight .s1 { color: var(--highlight-s1, #d01040) } /* Literal.String.Single */
-.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .ss { color: var(--highlight-ss, #990073) } /* Literal.String.Symbol */
-.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .bp { color: var(--highlight-bp, #999999) } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vc { color: var(--highlight-vc, #008080) } /* Name.Variable.Class */
-.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vg { color: var(--highlight-vg, #008080) } /* Name.Variable.Global */
-.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .vi { color: var(--highlight-vi, #008080) } /* Name.Variable.Instance */
-.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+.highlight .il { color: var(--highlight-il, #009999) } /* Literal.Number.Integer.Long */
 
 
 /*-- Codes Snippet --*/
@@ -77,14 +80,11 @@
 div.highlight,
 figure.highlight,
 .highlighter-rouge {
-  background: #f7f7f7;
+  background: var(--highlight-pre-bg, #f7f7f7)
 }
 
 .highlight {
   overflow: auto;
-  -moz-box-shadow: inset 0 0 2px #c2c6cc;
-  -webkit-box-shadow: inset 0 0 2px #c2c6cc;
-  box-shadow: inset 0 0 2px #c2c6cc;
 }
 
 .highlight .lineno {
@@ -92,8 +92,8 @@ figure.highlight,
   padding: 0 .5rem;
   min-width: 2.2rem;
   text-align: right;
-  color: #c2c6cc;
+  color: var(--highlight-lineno, #c2c6cc);
-  border-right: 1px solid #e9ecef;
+  border-right: 1px solid var(--highlight-lineno-border, #e9ecef);
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
@@ -125,7 +125,6 @@ figure.highlight,
 
 /* Override BS Inline-code style */
 .highlighter-rouge {
-  color: black;
   margin-bottom: 1.2em;
 }
 
@@ -140,7 +139,6 @@ code.highlighter-rouge {
   padding: 2px 4px;
   margin: 0 .3rem;
   border-radius: 4px;
-  border: 1px solid #e9ecef;
 }
 
 td.rouge-code {
@@ -166,3 +164,19 @@ div.language-console.highlighter-rouge td.rouge-code,
 div.language-terminal.highlighter-rouge td.rouge-code {
   padding: .8rem 1rem;
 }
+
+@media (prefers-color-scheme: light) {
+  .highlight {
+    -moz-box-shadow: inset 0 0 2px #c2c6cc;
+    -webkit-box-shadow: inset 0 0 2px #c2c6cc;
+    box-shadow: inset 0 0 2px #c2c6cc;
+  }
+
+  .highlighter-rouge {
+    color: black;
+  }
+
+  code.highlighter-rouge {
+    border: 1px solid #e9ecef;
+  }
+}

assets/css/tags.scss

@@ -15,8 +15,8 @@
   margin-right: .8rem;
   line-height: 3rem;
   letter-spacing: 0;
-  border: 1px solid #dee2e6 !important;
+  border: 1px solid var(--tag-border, #dee2e6) !important;
-  box-shadow: 0 0 3px 0 #e9ecef;
+  box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef);
 }
 
 .tag span {