Add dark theme support

ktnlvr · Nov 24, 2024 · cddaadc · cddaadc
1 parent 7055acf
commit cddaadc
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 22 deletions.
diff --git a/content/design/ezd6/style.css b/content/design/ezd6/style.css
@@ -1,6 +1,33 @@
 @import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
 
+:root {
+    --dark-green: #6f8e40;
+    --light-green: #a5e02f;
+}
+
+
+@media (prefers-color-scheme: dark) {
+    a {
+        color: var(--light-green);
+    }
+
+    ::selection {
+        background-color: var(--dark-green);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    a {
+        color: var(--dark-green);
+    }
+
+    ::selection {
+        background-color: var(--light-green);
+    }
+}
+
+
 body {
     font-size: 1.2rem;
     font-family: "PT Serif", serif;
@@ -14,14 +41,6 @@ h1 h2 h3 h4 h5 h6 {
     font-style: italic;
 }
 
-a {
-    color: #6f8e40;
-}
-
-::selection {
-    background-color: #a1f400;
-}
-
 img {
     width: 20%;
 }
diff --git a/static/style.css b/static/style.css
@@ -2,11 +2,40 @@
 @import url('https://fonts.cdnfonts.com/css/latin-modern-math');
 
 :root {
-    --text-color: #0B0C0D;
-    --gray-color: #5f5f5f;
-    --light-gray-color: #ababab;
-    --accent-color: #236689;
-    --background-color: #FFF;
+    --bg-color-dark: #1D1E22;
+    --bg-color-light: #FFF;
+
+    --text-color-dark: #EEE;
+    --text-color-light: #0B0C0D;
+
+    --text-faded-color-dark: #b3b3b3;
+    --text-faded-color-light: #ababab;
+
+    --text-accent-color-dark: #7cc1e6;
+    --text-accent-color-light: #236689;
+
+    --background-color: light-dark(var(--bg-color-light), var(--bg-color-dark));
+    --text-color: light-dark(var(--text-color-light), var(--text-color-dark)) --background-color: light-dark(var(--bg-color-light), var(--bg-color-dark));
+    --text-faded-color: light-dark(var(--text-faded-color-light), var(--text-faded-color-dark));
+    --text-accent-color: light-dark(var(--text-accent-color-light), var(--text-accent-color-dark));
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: var(--bg-color-dark);
+        --text-color: var(--text-color-dark);
+        --text-faded-color: var(--text-faded-color-dark);
+        --text-accent-color: var(--text-accent-color-dark);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --background-color: var(--bg-color-light);
+        --text-color: var(--text-color-light);
+        --text-faded-color: var(--text-faded-color-light);
+        --text-accent-color: var(--text-accent-color-light);
+    }
 }
 
 body {
@@ -30,7 +59,7 @@ h1 {
 
 a {
     text-decoration: underline;
-    color: var(--accent-color);
+    color: var(--text-accent-color);
 }
 
 h1 a {
@@ -53,7 +82,7 @@ h1 h2 h3 h4 h5 h6 {
 }
 
 .anchor {
-    color: var(--gray-color);
+    color: var(--text-faded-color);
     text-decoration: none;
 }
 
@@ -64,11 +93,11 @@ header {
 
 footer {
     padding-top: 15%;
-    color: var(--gray-color);
+    color: var(--text-faded-color);
 }
 
 footer>a {
-    color: var(--gray-color);
+    color: var(--text-faded-color);
 }
 
 iframe {
@@ -82,7 +111,7 @@ iframe {
     padding: 0;
     text-align: right;
     font-weight: normal;
-    color: var(--gray-color);
+    color: var(--text-faded-color);
 }
 
 sup::before {
@@ -135,6 +164,7 @@ pre {
 }
 
 #breadcrumbs {
+    color: var(--text-color);
     font-size: smaller;
     padding-left: 0;
 }
@@ -144,12 +174,12 @@ pre {
     display: inline;
 }
 
-.crumb > a {
-    color: var(--text-color);
+.crumb>a {
+    color: inherit;
     text-decoration: none;
 }
 
-.crumb > a:hover {
+.crumb>a:hover {
     text-decoration: underline;
 }
 
@@ -167,4 +197,4 @@ table {
 
 .footnote-backref {
     text-decoration: none;
-}
+}