fix(theme-toggle): quick flash (light/dark)

Author: ldez

assets/js/theme.js

@@ -5,15 +5,6 @@
   const themeToggleButtons = document.querySelectorAll(".hextra-theme-toggle");
   const themeToggleOptions = document.querySelectorAll(".hextra-theme-toggle-options p");
 
-  function setSystemTheme() {
-    const prefersColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-
-    document.documentElement.classList.remove("dark", "light");
-    document.documentElement.classList.add(prefersColorScheme);
-
-    document.documentElement.style.colorScheme = prefersColorScheme;
-  }
-
   function applyTheme(theme) {
     themeToggleButtons.forEach((btn) => btn.parentElement.dataset.theme = theme );
 
@@ -23,18 +14,12 @@
   function switchTheme(theme) {
      switch (theme) {
       case "light":
-        document.documentElement.classList.remove("dark");
-        document.documentElement.classList.add(theme);
-        document.documentElement.style.colorScheme = theme;
-
+        setLightTheme()
         applyTheme(theme);
 
         break;
       case "dark":
-        document.documentElement.classList.remove("light");
-        document.documentElement.classList.add(theme);
-        document.documentElement.style.colorScheme = theme;
-
+        setDarkTheme()
         applyTheme(theme);
 
         break;

layouts/_partials/head.html

@@ -59,6 +59,51 @@
     {{ partial "google-analytics.html" . -}}
   {{- end }}
 
+  <script>
+    // The section must not be in the theme.js file because it can create a quick flash (switch between light and dark).
+
+    const defaultTheme = '{{ site.Params.theme.default | default `system`}}'
+
+    function setLightTheme() {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.add("light");
+      document.documentElement.style.colorScheme = "light";
+    }
+
+    function setDarkTheme() {
+      document.documentElement.classList.remove("light");
+      document.documentElement.classList.add("dark");
+      document.documentElement.style.colorScheme = "dark";
+    }
+
+    function setSystemTheme() {
+      const prefersColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+      document.documentElement.classList.remove("dark", "light");
+      document.documentElement.classList.add(prefersColorScheme);
+
+      document.documentElement.style.colorScheme = prefersColorScheme;
+    }
+
+    const colorTheme = "color-theme" in localStorage ? localStorage.getItem("color-theme") : defaultTheme;
+
+    switch (colorTheme) {
+      case "light":
+        setLightTheme();
+
+        break;
+      case "dark":
+        setDarkTheme()
+
+        break;
+      default:
+        setSystemTheme();
+
+        break;
+    }
+
+  </script>
+
   <!-- Math engine -->
   {{ $noop := .WordCount -}}
   {{- $engine := site.Params.math.engine | default "katex" -}}