chore: avoid theme flashes (#15927)

harish-sethuraman · web-flow · commit da694b9d7cb0 · 2022-06-03T12:23:16.000+02:00
* fix: avoid theme flashes

* fix: remove unwanted code and revamp `package.json`

* chore: revert pacakage.json changes
diff --git a/docs/src/_includes/layouts/base.njk b/docs/src/_includes/layouts/base.njk
@@ -46,13 +46,13 @@
     <link rel="preload" href="{{ '/assets/fonts/SpaceMono-Regular-subset.woff2' | url }}" as="font" type="font/woff2" crossorigin>
 
     <script>
-        (function(){
-            var theme = window.localStorage.getItem("theme");
-            if (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                document.documentElement.setAttribute('data-theme', 'dark');
-            }
-            else if (theme) document.documentElement.setAttribute('data-theme', theme);
-        })();
+         (function () {
+                var theme = window.localStorage.getItem("theme");
+                if (theme) document.documentElement.setAttribute('data-theme', theme)
+                else if (window.matchMedia('(prefers-color-scheme: dark)').matches)
+                    document.documentElement.setAttribute('data-theme', 'dark');
+                else document.documentElement.setAttribute('data-theme', 'light');
+            })();
     </script>
 
 
diff --git a/docs/src/assets/js/themes.js b/docs/src/assets/js/themes.js
@@ -8,11 +8,6 @@
         btn.setAttribute("aria-pressed", "false");
     }
 
-
-    let theme = window.localStorage.getItem("theme");
-    document.documentElement.setAttribute('data-theme', theme);
-    if (!theme) document.documentElement.setAttribute('data-theme', 'light');
-
     document.addEventListener('DOMContentLoaded', function() {
         var switcher = document.getElementById('js-theme-switcher');
         switcher.removeAttribute('hidden');
@@ -22,10 +17,6 @@
 
         // get any previously-chosen themes
         var theme = window.localStorage.getItem("theme");
-        if (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            document.documentElement.setAttribute('data-theme', 'dark');
-        }
-        else if (theme) document.documentElement.setAttribute('data-theme', theme);
 
         if (theme == "light") {
             enableToggle(light_theme_toggle);
