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

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

Hide file tree

Showing 3 changed files with 11 additions and 8 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)

diff --git a/templates/base.html b/templates/base.html
@@ -1,14 +1,18 @@
 {% import 'macros.html' as macros %}
 
 <!DOCTYPE html>
-<html lang="{{lang}}">
+<html lang="{{lang}}" {% if config.extra.colorscheme %}theme="{{ config.extra.colorscheme }}"{% endif %}>
 
 <head>
   <meta charset="utf-8" />
   <meta content="width=device-width, initial-scale=1" name="viewport" />
   <meta content="#ffffff" name="theme-color" />
   <meta content="#da532c" name="msapplication-TileColor" />
 
+  <script>
+    if (localStorage.getItem("theme")) document.documentElement.setAttribute("theme", localStorage.getItem("theme"));
+  </script>
+
   {% if config.extra.favicon.webmanifest %}
   <link href='{{ config.extra.favicon.webmanifest }}' rel="manifest" />
   {% endif %}
@@ -71,7 +75,7 @@
   {% endif %}
 </head>
 
-<body class="has-background-white" {% if config.extra.colorscheme %}theme="{{ config.extra.colorscheme }}"{% endif %}>
+<body class="has-background-white">
   <nav aria-label="section navigation" class="navbar is-light" role="navigation">
     <div class="container">
       <div class="navbar-brand">