v2: CSS dark mode, including SVGs

1 files changed, 44 insertions, 7 deletions

diff --git a/v2/src/content/style.css b/v2/src/content/style.css
index 0ec67a8..7797065 100644
--- a/v2/src/content/style.css
+++ b/v2/src/content/style.css
@@ -1,11 +1,48 @@
+/* Colors */
+
+:root {
+  --color: black;
+  --background-color: white;
+  --nav-color: hsl(0, 100%, 25%);
+  --fade-color: #555;
+  --quote-color: hsl(0, 0%, 41%);
+  --code-border-color: hsla(0, 0%, 0%, 0.3);
+  --link-color: #0000ee;
+  --link-color-visited: #551a8b;
+}
+
+@media(prefers-color-scheme: dark) {
+  :root {
+    --color: white;
+    --background-color: black;
+    --fade-color: #aaa;
+    --nav-color: hsl(0, 100%, 75%);
+    --quote-color: hsl(0, 0%, 59%);
+    --code-border-color: hsla(0, 0%, 100%, 0.3);
+    --link-color: hsl(211, 100%, 60%);
+    --link-color-visited: hsl(242, 100%, 80%);
+  }
+}
+
+
 /* General declarations */
 
 body {
+  color: var(--color);
+  background-color: var(--background-color);
   margin: 0px auto;
   padding: 1%;
   max-width: 750px;
 }
 
+a {
+  color: var(--link-color);
+}
+
+a:visited {
+  color: var(--link-color-visited);
+}
+
 .svg-icon {
   vertical-align: middle;
 }
@@ -14,7 +51,7 @@ body {
 /* Navigation header */
 
 nav a {
-  color: maroon;
+  color: var(--nav-color);
   font-size: 18px;
   margin: 12px;
   text-decoration: none;
@@ -25,7 +62,7 @@ nav ul, nav li {
 }
 
 nav ul li a {
-  color: black;
+  color: var(--color);
   font-size: 14px;
   margin: 6px;
 }
@@ -34,14 +71,14 @@ nav ul li a {
 /* Article bodies */
 
 .timestamp {
-  color: #555;
+  color: var(--fade-color);
   font-size: 14px;
   font-style: italic;
 }
 
 blockquote {
   font-style: italic;
-  color: dimgrey;
+  color: var(--quote-color);
   padding-left: 10px;
   border-left: 3px solid #ccc;
 }
@@ -81,7 +118,7 @@ footer li a {
   margin-right: 3px;
   padding-right: 3px;
   border-right: 1px solid;
-  border-color: hsla(0, 0%, 0%, 0.3);
+  border-color: var(--code-border-color);
   text-align: right;
   user-select: none;
 }
@@ -108,7 +145,7 @@ pre {
 /* Code block anchors */
 
 .line-number a, a.code-line-anchor {
-  color: black;
+  color: var(--color);
   text-decoration: none;
 }
 
@@ -120,7 +157,7 @@ a.code-line-anchor:hover {
 /* Header anchor */
 
 .header-anchor {
-  color: black;
+  color: var(--color);
   text-decoration: none;
   display: block;
   margin-bottom: 15px;