src/content/style.css: Support dark mode

1 files changed, 39 insertions, 11 deletions

diff --git a/src/content/style.css b/src/content/style.css
index 85cc7f5..86e23eb 100644
--- a/src/content/style.css
+++ b/src/content/style.css
@@ -1,3 +1,31 @@
+:root {
+  --color-fg: black;
+  --color-bg: white;
+  --color-2nd-fg: #555555;
+  --color-2nd-bg: #f5f5f5;
+  --color-pre-border: hsla(0, 100%, 0%, 30%);
+
+  color:            var(--color-fg);
+  background-color: var(--color-bg);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-fg: white;
+    --color-bg: black;
+    --color-2nd-fg: #aaaaaa;
+    --color-2nd-bg: #222222;
+    --color-pre-border: hsla(50, 100%, 70%, 10%);
+  }
+
+  a {
+    color: hsl(211, 100%, 60%);
+    &:visited {
+      color: hsl(242, 100%, 80%);
+    }
+  }
+}
+
 /* General declarations */
 
 body {
@@ -28,7 +56,6 @@ nav .nav-row {
 }
 
 nav a {
-  color: maroon;
   font-size: 18px;
   margin: 12px;
   text-decoration: none;
@@ -39,7 +66,6 @@ nav ul, nav li {
 }
 
 nav ul li a {
-  color: black;
   font-size: 14px;
   margin: 6px;
 }
@@ -48,16 +74,16 @@ nav ul li a {
 /* Article bodies */
 
 #published-at, #updated-at {
-  color: #555;
+  color: var(--color-2nd-fg);
   font-size: 14px;
   font-style: italic;
 }
 
 blockquote {
   font-style: italic;
-  color: dimgrey;
+  color: var(--color-2nd-fg);
   padding-left: 10px;
-  border-left: 3px solid #ccc;
+  border-left: 3px solid var(--color-2nd-fg);
 }
 
 ul.no-style {
@@ -86,7 +112,7 @@ body > footer li a {
 }
 
 .content-footer, .page-footer, #footnotes {
-  border-top: 0.5px solid #555;
+  border-top: 0.5px solid var(--color-2nd-fg);
 }
 
 
@@ -99,14 +125,16 @@ pre.lineno {
   margin-right: 3px;
   padding-right: 3px;
   border-right: 1px solid;
-  border-color: hsla(0, 0%, 0%, 0.3);
+  border-color: var(--color-pre-border);
   text-align: right;
   user-select: none;
 }
 
 .highlight, .listingblock .content {
-  border: 1px solid #ccc;
+  border: 1px solid;
+  border-color: var(--color-pre-border);
   border-radius: 10px;
+  background-color: var(--color-2nd-bg);
 }
 
 pre {
@@ -117,7 +145,8 @@ pre {
 /* Code block anchors */
 
 a.code-line-anchor {
-  color: black;
+  color: var(--color-fg);
+  user-select: none;
   text-decoration: none;
 }
 
@@ -129,7 +158,7 @@ a.code-line-anchor:hover {
 /* Header anchor */
 
 div.header-anchor {
-  color: black;
+  color: var(--color-fg);
   text-decoration: none;
   display: block;
   margin-bottom: 15px;
@@ -163,7 +192,6 @@ div.header-anchor:hover img {
 }
 
 a.anchor {
-  /* FIXME: dark-mode */
   background: transparent url(img/link/light.svg) center right no-repeat;
   padding-right: 22px;
   margin-left: 10px;