Fix RatanShreshtha#46 : Dark mode flickers on load of new page

For this, I moved the theme attribute from body to the html tag
shafan · May 21, 2022 · 6e7ea36 · 6e7ea36
1 parent a96aab8
commit 6e7ea36
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/sass/deep-thought.sass b/sass/deep-thought.sass
@@ -8,8 +8,7 @@ $family-sans-serif: "Jost", sans-serif;
 $footer-padding: 1.0rem 2.5rem;
 
 @mixin base_dark
-    filter: invert(1) hue-rotate(180deg);
-
+    body,
     img,
     picture,
     video,
@@ -26,11 +25,11 @@ body
     min-height: 100vh;
 
 
-body[theme="dark"]
+html[theme="dark"]
     @include base_dark()
 
 
-body[theme="auto"]
+html[theme="auto"]
     @media (prefers-color-scheme: dark)
         @include base_dark()
 

diff --git a/static/js/site.js b/static/js/site.js
@@ -171,7 +171,7 @@ function search() {
 }
 
 function setTheme(color) {
-    document.body.setAttribute("theme", color);
+    document.documentElement.setAttribute("theme", color);
     document.getElementById("dark-mode").setAttribute("title", "Switch to "+color+" theme");
 }
 
@@ -219,7 +219,7 @@ function documentReadyCallback() {
   });
 
   document.getElementById("dark-mode").addEventListener("click", () => {
-    const theme = document.body.getAttribute("theme");
+    const theme = document.documentElement.getAttribute("theme");
     const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
     if (
       theme === "light" || theme === null || (theme === "auto" && !isDarkMode)