Fix dark light mode flicker

2020-09-14 18:42:29 +02:00
parent fefff75774
commit 484d30b622
6 changed files with 94 additions and 19 deletions
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -7,7 +7,27 @@ layout: compress

 {% include header.html %}

-<body data-theme="{{ site.mode }}">
+<body data-theme="{{ site.mode }}" class="notransition">
+
+  <script>
+    const body = document.body;
+    const data = body.getAttribute("data-theme");
+
+    const initTheme = (state) => {
+      if (state === "dark") {
+        body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        body.removeAttribute("data-theme");
+      } else {
+        localStorage.setItem("theme", data);
+      }
+    };
+ 
+    initTheme(localStorage.getItem("theme"));
+    
+    setTimeout(() => body.classList.remove("notransition"), 75);
+  </script>
+
  {% include navbar.html %}
  <div class="wrapper">
    <header class="header">