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/post.html
+++ b/_layouts/post.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 post">
    <main class="page-content" aria-label="Content">
@@ -55,7 +75,7 @@ layout: compress
      </article>
    
      {% if page.comments %}
-        {% include comments.html%}
+        {% include comments.html %}
      {% endif %}

    </main>
@@ -71,4 +91,4 @@ layout: compress
  </div>
 </body>

-</html>
+</html>