Merge pull request #11 from peterkos/peterkos/mode-var-refactor

Light/Dark mode switch refactor: toggle on `<html>`, use CSS vars
InputUsername · Aug 17, 2024 · 884008f · 884008f
2 parents 6644da0 + 1be4661
commit 884008f
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 120 deletions.
diff --git a/sass/_theme.scss b/sass/_theme.scss
@@ -1,149 +1,116 @@
-$foreground: #222222;
-$background: #eeeeee;
-$secondary: gray;
-$tertiary: #dddddd;
-$accent: #3d3cba;
-
-$foreground-dark: #eeeeee;
-$background-dark: #161616;
-$secondary-dark: #999999;
-$tertiary-dark: #444444;
-$accent-dark: #959bf0;
-
 @mixin light-theme {
-    color: $foreground;
-    background-color: $background;
-
-    .secondary {
-        color: $secondary;
-    }
-
-    a, a:link, a:visited {
-        color: $accent;
-    }
-
-    a:hover {
-        color: darken($accent, 30%);
-    }
-
-    blockquote {
-        border-left: 2px solid $secondary;
-    }
-
-    code {
-        background-color: $tertiary;
-    }
-
-    pre code {
-        background-color: transparent;
-    }
-
-    .footnote-definition sup {
-        color: $secondary;
-    }
-
-    table {
-        th, td {
-            border-color: darken($tertiary, 5%);
-        }
-
-        thead, tr:nth-child(even) {
-            background-color: lighten($tertiary, 10%);
-        }
-    }
+    --foreground: #222222;
+    --background: #eeeeee;
+    --secondary: #808080;
+    --tertiary: #dddddd;
+    --accent: #3d3cba;
+    --accent-highlight: #171746;
+    --table-border: #d0d0d0;
+    --table-row: #f7f7f7;
 }
 
 @mixin dark-theme {
-    color: $foreground-dark;
-    background-color: $background-dark;
+    --foreground: #eeeeee;
+    --background: #161616;
+    --secondary: #999999;
+    --tertiary: #444444;
+    --accent: #959bf0;
+    --accent-highlight: #c2c5f6;
+    --table-border: var(--tertiary);
+    --table-row: #1e1e1e;
+}
 
-    .secondary {
-        color: $secondary-dark;
-    }
+:root.light-mode {
+    @include light-theme;
 
-    a, a:link, a:visited {
-        color: $accent-dark;
+    #dark-mode-on {
+        display: inline;
     }
 
-    a:hover {
-        color: lighten($accent-dark, 10%);
+    #dark-mode-off {
+        display: none;
     }
+}
 
-    blockquote {
-        border-left: 2px solid $secondary-dark;
-    }
+:root.dark-mode {
+    @include dark-theme;
 
-    code {
-        background-color: $tertiary-dark;
+    #dark-mode-on {
+        display: none;
     }
 
-    pre code {
-        background-color: transparent;
+    #dark-mode-off {
+        display: inline;
     }
+}
 
-    .footnote-definition sup {
-        color: $secondary-dark;
-    }
+.dark-mode-buttons {
+    position: absolute;
 
-    table {
-        th, td {
-            border-color: $tertiary-dark;
-        }
+    top: 1em;
+    right: 1em;
+}
 
-        thead, tr:nth-child(even) {
-            background-color: darken($tertiary-dark, 15%);
-        }
+.dark-mode-button {
+    border: none;
+    background-color: transparent;
+
+    &:hover {
+        cursor: pointer;
     }
 }
 
 @media (prefers-color-scheme: light) {
-    body {
+    :root {
         @include light-theme;
     }
 }
 
 @media (prefers-color-scheme: dark) {
-    body {
+    :root {
         @include dark-theme;
     }
 }
 
-.dark-mode-buttons {
-    position: absolute;
+body {
+    color: var(--foreground);
+    background-color: var(--background);
+}
 
-    top: 1em;
-    right: 1em;
+.secondary {
+    color: var(--secondary);
 }
 
-.dark-mode-button {
-    border: none;
-    background-color: transparent;
+a, a:link, a:visited {
+    color: var(--accent);
+}
 
-    &:hover {
-        cursor: pointer;
-    }
+a:hover {
+    color: var(--accent-highlight);
 }
 
-body:not(.dark-mode) {
-    @include light-theme;
+blockquote {
+    border-left: 2px solid var(--secondary);
+}
 
-    #dark-mode-on {
-        display: inline;
-    }
+code {
+    background-color: var(--tertiary);
+}
 
-    #dark-mode-off {
-        display: none;
-    }
+pre code {
+    background-color: transparent;
 }
 
-body.dark-mode {
-    @include dark-theme;
+.footnote-definition sup {
+    color: var(--secondary);
+}
 
-    #dark-mode-on {
-        display: none;
+table {
+    th, td {
+        border-color: var(--table-border);
     }
 
-    #dark-mode-off {
-        display: inline;
+    thead, tr:nth-child(even) {
+        background-color: var(--table-row);
     }
 }
diff --git a/sass/style.scss b/sass/style.scss
@@ -75,21 +75,24 @@ table {
     border-spacing: 0;
 
     th, td {
-        border: 1px solid;
-        border-left: none;
+        border-width: 1px;
+        border-style: solid;
+        border-left-style: none;
         padding: 0.2em;
 
         &:first-child {
-            border-left: 1px solid;
+            border-left-width: 1px;
+            border-left-style: solid;
         }
     }
 
     th {
-        border-top: 1px solid;
+        border-top-width: 1px;
+        border-top-style: solid;
     }
 
     td {
-        border-top: none;
+        border-top-style: none;
     }
 }
 

diff --git a/templates/index.html b/templates/index.html
@@ -57,23 +57,33 @@ <h2>Recent posts</h2>
         <button class="dark-mode-button" id="dark-mode-off"><img src="{{ get_url(path='light_mode.svg') }}" width="24" height="24" alt="Light mode" aria-label="light mode toggle" title="Light mode"></button>
     </div>
     <script>
-        const cls = document.body.classList;
-        const getSessionTheme = sessionStorage.getItem("theme");
-        if (getSessionTheme === "dark") {
-            cls.toggle("dark-mode", true);
-        } else if (getSessionTheme === "light") {
-            cls.toggle("dark-mode", false);
+        const cls = document.querySelector("html").classList;
+        const sessionTheme = sessionStorage.getItem("theme");
+
+        function setDark() {
+            cls.add("dark-mode");
+            cls.remove("light-mode");
+            sessionStorage.setItem("theme", "dark");
+        }
+        function setLight() {
+            cls.add("light-mode");
+            cls.remove("dark-mode");
+            sessionStorage.setItem("theme", "light");
+        }
+
+        if (sessionTheme === "dark") {
+            setDark();
+        } else if (sessionTheme === "light") {
+            setLight();
         } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-            cls.toggle("dark-mode", true);
+            setDark();
         }
 
         document.getElementById("dark-mode-on").addEventListener("click", function(e) {
-            cls.toggle("dark-mode", true);
-            sessionStorage.setItem("theme", "dark");
+            setDark();
         });
         document.getElementById("dark-mode-off").addEventListener("click", function(e) {
-            cls.toggle("dark-mode", false);
-            sessionStorage.setItem("theme", "light");
+            setLight();
         });
     </script>
     <noscript>