From c631be65bc48a4ff7759bf5eed8cb92aa38295b5 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sat, 11 Mar 2023 11:52:49 -0800
Subject: [PATCH] Tentatively add a dark mode

---
 assets/scss/code.scss      | 27 +++++++++++++++++++--------
 assets/scss/style.scss     | 16 ++++++++++------
 assets/scss/toc.scss       |  3 +--
 assets/scss/variables.scss | 31 +++++++++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/assets/scss/code.scss b/assets/scss/code.scss
index 21d91ff..0f0f1d8 100644
--- a/assets/scss/code.scss
+++ b/assets/scss/code.scss
@@ -1,9 +1,20 @@
 @import "variables.scss";
 
 $code-color-lineno: grey;
-$code-color-keyword: black;
-$code-color-type: black;
-$code-color-comment: grey;
+
+:root {
+    --code-color-keyword: black;
+    --code-color-type: black;
+    --code-color-comment: grey;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --code-color-keyword: #{darken(white, 40%)};
+        --code-color-type: #{darken(white, 40%)};
+        --code-color-comment: grey;
+    }
+}
 
 .highlight-label {
     padding: 0.25rem 0.5rem 0.25rem 0.5rem;
@@ -21,7 +32,7 @@ $code-color-comment: grey;
 
 code {
   font-family: $font-code;
-  background-color: $code-color;
+  background-color: var(--code-color);
   border: $code-border;
   padding: 0 0.25rem 0 0.25rem;
 }
@@ -37,7 +48,7 @@ pre code {
     .lntable {
         border-spacing: 0;
         padding: 0.5rem 0 0.5rem 0;
-        background-color: $code-color;
+        background-color: var(--code-color);
         border-radius: 0;
         border: $code-border;
         display: block;
@@ -84,14 +95,14 @@ pre code {
 
 .kr, .k {
     font-weight: bold;
-    color: $code-color-keyword;
+    color: var(--code-color-keyword);
 }
 
 .kt {
     font-weight: bold;
-    color: $code-color-type;
+    color: var(--code-color-type);
 }
 
 .c, .c1 {
-    color: $code-color-comment;   
+    color: var(--code-color-comment);
 }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 7c67fd3..b22cf9b 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -3,6 +3,8 @@
 @import "toc.scss";
 
 body {
+  background-color: var(--background-color);
+  color: var(--text-color);
   font-family: $font-body;
   font-size: 1.0rem;
   line-height: 1.5;
@@ -22,7 +24,7 @@ h1, h2, h3, h4, h5, h6 {
   text-align: center;
 
   &:target {
-    background-color: lighten(yellow, 30%);
+    background-color: var(--target-background-color);
     border-radius: 1rem;
   }
 
@@ -88,7 +90,7 @@ nav {
   a {
     padding: 0.25rem 0.75rem 0.25rem .75rem;
     text-decoration: none;
-    color: black;
+    color: var(--text-color);
     display: inline-block;
     border-bottom: none;
     white-space: nowrap;
@@ -128,7 +130,7 @@ h6 {
 }
 
 a {
-  color: black;
+  color: var(--text-color);
   text-decoration: none;
   border-bottom: .2rem solid $primary-color;
   transition: color 0.25s;
@@ -139,7 +141,8 @@ a {
 }
 
 img {
-  max-width: 100%
+  max-width: 100%;
+  background-color: white;
 }
 
 table {
@@ -231,6 +234,7 @@ ul.post-list {
 
 figure {
     img {
+        border-radius: 0.5rem;
         max-width: 70%;
         display: block;
         margin: auto;
@@ -268,8 +272,8 @@ figure {
 .warning {
     @include bordered-block;
     padding: 0.5rem;
-    background-color: #ffee99;
-    border-color: #f5c827;
+    background-color: var(--warning-background-color);
+    border-color: var(--warning-border-color);
 }
 
 .feather {
diff --git a/assets/scss/toc.scss b/assets/scss/toc.scss
index b654459..70ba4c7 100644
--- a/assets/scss/toc.scss
+++ b/assets/scss/toc.scss
@@ -2,7 +2,6 @@
 @import "mixins.scss";
 @import "margin.scss";
 
-$toc-color: $code-color;
 $toc-border-color: $code-border-color;
 
 .table-of-contents {
@@ -46,7 +45,7 @@ $toc-border-color: $code-border-color;
     div.wrapper {
         @include bordered-block;
         padding: 1rem;
-        background-color: $toc-color;
+        background-color: var(--code-color);
         border-color: $toc-border-color;
         box-sizing: border-box;
         max-width: 100%;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 3f32fee..0241e03 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -5,12 +5,43 @@ $standard-border-width: .075rem;
 
 $primary-color: #36e281;
 $border-color: #bfbfbf;
+$background-color: white;
+$background-color-dark: #1b1d1f;
 $code-color: #f0f0f0;
+$code-color-dark: lighten($background-color-dark, 10%);
 $code-border-color: darken($code-color, 10%);
 
 $font-heading: "Lora", serif;
 $font-body: "Raleway", serif;
 $font-code: "Inconsolata", monospace;
 
+$warning-background-color: #ffee99;
+$warning-border-color: #f5c827;
+$warning-background-color-dark: #75640a;
+$warning-border-color-dark: $warning-background-color;
+
+$target-background-color: lighten(yellow, 30%);
+$target-background-color-dark: #55511c;
+
 $standard-border: $standard-border-width solid $border-color;
 $code-border: $standard-border-width solid $code-border-color;
+
+:root {
+    --background-color: #{$background-color};
+    --text-color: black;
+    --code-color: #{$code-color};
+    --warning-background-color: #{$warning-background-color};
+    --warning-border-color: #{$warning-border-color};
+    --target-background-color: #{$target-background-color};
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #{$background-color-dark};
+        --text-color: white;
+        --code-color: #{$code-color-dark};
+        --warning-background-color: #{$warning-background-color-dark};
+        --warning-border-color: #{$warning-border-color-dark};
+        --target-background-color: #{$target-background-color-dark};
+    }
+}