Implements dark mode (#14)

README.md

@@ -67,23 +67,7 @@ weight = 2
 
 You can override theme variable by creating a file named `_variables.html` in your `templates` directory.
 
-```html
-<style>
-    :root {
-        /* Primary theme color */
-        --primary-color: #FED43F;
-        /* Primary theme text color */
-        --primary-text-color: #543631;
-        /* Primary theme link color */
-        --primary-link-color: #F9BB2D;
-        /* Secondary color: the background body color */
-        --secondary-color: #fcfaf6;
-        --secondary-text-color: #303030;
-        /* Highlight text color of table of content */
-        --toc-highlight-text-color: #d46e13;
-    }
-</style>
-```
+See the default value [here](./templates/_variables.html)
 
 ### Favicon
 

sass/_markdown.scss

@@ -10,15 +10,15 @@
   padding: 1.25em 1.5em;
   white-space: pre;
   word-wrap: normal;
-  background-color: white;
-  color: #4a4a4a;
+  background-color: var(--code-background-color);
+  color: var(--code-color);
   font-size: .875em;
   font-family: monospace;
 }
 
 .content code {
-  background-color: white;
-  color: #4a4a4a;
+  background-color: var(--code-background-color);
+  color: var(--code-color);
   font-size: .875em;
   font-weight: normal;
   padding: 0.25em 0.5em;

sass/_ultility.scss

@@ -9,5 +9,5 @@
 }
 
 .box-shadow {
-  box-shadow: 0 2px 10px 2px #ddd;
+  box-shadow: 0 2px 10px 2px var(--shadow-color);
 }

sass/juice.scss

@@ -31,7 +31,7 @@ p > img {
 
 header {
   background-color: var(--primary-color);
-  color: black;
+  color: var(--primary-text-color);
   padding: 20px 50px;
   display: flex;
   align-items: center;
@@ -59,7 +59,7 @@ header {
   font-weight: bold;
 
   &:hover {
-    color: #000;
+    color: var(--primary-text-color-over);
     text-decoration: underline;
   }
 }
@@ -118,7 +118,7 @@ main {
 .toc-sticky {
   border-radius: 3px;
   border-top: 5px solid var(--primary-color);
-  background-color: white;
+  background-color: var(--toc-background-color);
   position: sticky;
   position: -webkit-sticky;
   position: -moz-sticky;

templates/_variables.html

@@ -4,6 +4,7 @@
         --primary-color: #FED43F;
         /* Primary theme text color */
         --primary-text-color: #543631;
+        --primary-text-color-over: #000;
         /* Primary theme link color */
         --primary-link-color: #F9BB2D;
         /* Secondary color: the background body color */
@@ -11,5 +12,27 @@
         --secondary-text-color: #303030;
         /* Highlight text color of table of content */
         --toc-highlight-text-color: #d46e13;
+        --toc-background-color: white;
+        --code-color: #4a4a4a;
+        --code-background-color: white;
+
+        --shadow-color: #ddd;
     }
-</style>
+
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --primary-color: #382929;
+            --primary-text-color: #d7d7d7;
+            --primary-text-color-over: #FFF;
+            --primary-link-color: #9b9b9b;
+            --secondary-color: #282828;
+            --secondary-text-color: #f2f2f2;
+            --toc-highlight-text-color: #f2f2f2;
+            --toc-background-color: #3a3a3a;
+            --code-color: white;
+            --code-background-color: #4a4a4a;
+
+            --shadow-color: #202020;
+        }
+    }
+</style>