diff --git a/sass/_theme.scss b/sass/_theme.scss
index 3f8f57b..6f741df 100644
--- a/sass/_theme.scss
+++ b/sass/_theme.scss
@@ -1,113 +1,44 @@
-$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;
-    }
+// MARK: Variables
+
+:root.light-mode {
+    --foreground: #222222;
+    --background: #eeeeee;
+    --secondary: gray;
+    --tertiary: #dddddd;
+    --accent: #3d3cba;
+}
 
-    code {
-        background-color: $tertiary;
-    }
+:root.dark-mode {
+    --foreground: #eeeeee;
+    --background: #161616;
+    --secondary: #999999;
+    --tertiary: #444444;
+    --accent: #959bf0;
+}
 
-    pre code {
-        background-color: transparent;
-    }
 
-    .footnote-definition sup {
-        color: $secondary;
-    }
+// MARK: Light/dark config
 
-    table {
-        th, td {
-            border-color: darken($tertiary, 5%);
+html {
+    &.light-mode {         
+        #dark-mode-on {
+            display: inline;
         }
-
-        thead, tr:nth-child(even) {
-            background-color: lighten($tertiary, 10%);
+        #dark-mode-off {
+            display: none;
         }
     }
-}
-
-@mixin dark-theme {
-    color: $foreground-dark;
-    background-color: $background-dark;
-
-    .secondary {
-        color: $secondary-dark;
-    }
-
-    a, a:link, a:visited {
-        color: $accent-dark;
-    }
-
-    a:hover {
-        color: lighten($accent-dark, 10%);
-    }
-
-    blockquote {
-        border-left: 2px solid $secondary-dark;
-    }
-
-    code {
-        background-color: $tertiary-dark;
-    }
-
-    pre code {
-        background-color: transparent;
-    }
 
-    .footnote-definition sup {
-        color: $secondary-dark;
-    }
-
-    table {
-        th, td {
-            border-color: $tertiary-dark;
+    &.dark-mode {
+        #dark-mode-on {
+            display: none;
         }
-
-        thead, tr:nth-child(even) {
-            background-color: darken($tertiary-dark, 15%);
+        #dark-mode-off {
+            display: inline;
         }
     }
 }
 
-@media (prefers-color-scheme: light) {
-    body {
-        @include light-theme;
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    body {
-        @include dark-theme;
-    }
-}
-
 .dark-mode-buttons {
     position: absolute;
 
@@ -124,26 +55,49 @@ $accent-dark: #959bf0;
     }
 }
 
-body:not(.dark-mode) {
-    @include light-theme;
 
-    #dark-mode-on {
-        display: inline;
-    }
 
-    #dark-mode-off {
-        display: none;
-    }
+// MARK: Styles
+
+body {
+    color: var(--foreground);
+    background-color: var(--background);
+}
+
+.secondary {
+    color: var(--secondary);
+}
+
+a, a:link, a:visited {
+    color: var(--accent);
+}
+
+a:hover {
+    color: color-mix(in hsl, var(--accent) 30%, black);
+}
+
+blockquote {
+    border-left: 2px solid var(--secondary);
 }
 
-body.dark-mode {
-    @include dark-theme;
+code {
+    background-color: var(--tertiary);
+}
+
+pre code {
+    background-color: transparent;
+}
+
+.footnote-definition sup {
+    color: var(--secondary);
+}
 
-    #dark-mode-on {
-        display: none;
+table {
+    th, td {
+        border-color: color-mix(in hsl, var(--tertiary) 5%, black);
     }
 
-    #dark-mode-off {
-        display: inline;
+    thead, tr:nth-child(even) {
+        background-color: color-mix(in hsl, var(--tertiary) 10%, white);
     }
 }
diff --git a/templates/index.html b/templates/index.html
index 4b15bf1..8ad14af 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -57,23 +57,34 @@ <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 cls = document.querySelector("html").classList;
         const getSessionTheme = 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 (getSessionTheme === "dark") {
-            cls.toggle("dark-mode", true);
+            setDark()
         } else if (getSessionTheme === "light") {
-            cls.toggle("dark-mode", false);
+            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>