fix: Prevent flash of light mode if dark mode is selected (#446)

eps1lon · web-flow · commit 630089cdb65a · 2021-11-22T12:16:49.000+01:00
diff --git a/11ty/_includes/layouts/base.njk b/11ty/_includes/layouts/base.njk
@@ -35,6 +35,29 @@
     {% endblock pageStyles %}
   </head>
   <body>
+    <script>
+      /**
+      * @type String
+      */
+      let userThemeSetting = localStorage.getItem('sdUserTheme');
+
+      if (userThemeSetting) {
+        document.documentElement.setAttribute(
+          'data-user-theme',
+          userThemeSetting
+        );
+      }
+
+      window.setUserPreference = function setUserPreference(value) {
+        localStorage.setItem('sdUserTheme', value);
+        document.documentElement.setAttribute('data-user-theme', value);
+      }
+
+      window.unsetUserPreference = function unsetUserPreference() {
+        localStorage.removeItem('sdUserTheme');
+        document.documentElement.removeAttribute('data-user-theme');
+      }
+    </script>
     {% block content %}{% endblock content %}
     {% include 'components/base/site-footer.njk' %}
     {% block pageScript %}
diff --git a/11ty/assets/js/theme-switcher.js b/11ty/assets/js/theme-switcher.js
@@ -9,17 +9,15 @@ function initThemeSwitch() {
 
   let $buttons = $switchContainer.querySelectorAll('[type="radio"]');
 
-  /**
-   * @type String
-   */
-  let userThemeSetting = localStorage.getItem('sdUserTheme');
-
   function setInitialState() {
+    /**
+     * @type String
+     */
+    let userThemeSetting = document.documentElement.getAttribute(
+      'data-user-theme'
+    );
+
     if (userThemeSetting) {
-      document.documentElement.setAttribute(
-        'data-user-theme',
-        userThemeSetting
-      );
       $switchContainer.querySelector(
         `[value="${userThemeSetting}"]`
       ).checked = true;
@@ -28,25 +26,15 @@ function initThemeSwitch() {
     }
   }
 
-  function setUserPreference(value) {
-    localStorage.setItem('sdUserTheme', value);
-    document.documentElement.setAttribute('data-user-theme', value);
-  }
-
-  function unsetUserPreference() {
-    localStorage.removeItem('sdUserTheme');
-    document.documentElement.removeAttribute('data-user-theme');
-  }
-
   Array.from($buttons).forEach(function($button) {
     $button.addEventListener('change', function() {
       // only run the switch functionality for the currently active radio button
       if (!$button.checked) return;
 
       if (userOverwrite.includes($button.value)) {
-        setUserPreference($button.value);
+        window.setUserPreference($button.value);
       } else {
-        unsetUserPreference();
+        window.unsetUserPreference();
       }
     });
   });
