fix(dark-mode): avoid flickering when navigating between pages

vogloblinsky · vogloblinsky · commit 0ff45cd63679 · 2023-11-01T17:44:08.000+01:00
closes #1397
diff --git a/src/resources/js/menu.js b/src/resources/js/menu.js
@@ -266,60 +266,5 @@ document.addEventListener('DOMContentLoaded', function () {
                 }, 300);
             }
         }
-        // Dark mode toggle button
-        var useDark = window.matchMedia('(prefers-color-scheme: dark)');
-        var darkModeState = useDark.matches;
-        var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
-        var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
-        var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
-
-        function checkToggle(check) {
-            for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
-                $darkModeToggleSwitchers[i].checked = check;
-            }
-        }
-
-        function toggleDarkMode(state) {
-            if (window.localStorage) {
-                localStorage.setItem('compodoc_darkmode-state', state);
-            }
-
-            checkToggle(state);
-
-            const hasClass = document.body.classList.contains('dark');
-
-            if (state) {
-                for (var i = 0; i < $darkModeToggles.length; i++) {
-                    $darkModeToggles[i].classList.add('dark');
-                }
-                if (!hasClass) {
-                    document.body.classList.add('dark');
-                }
-            } else {
-                for (var i = 0; i < $darkModeToggles.length; i++) {
-                    $darkModeToggles[i].classList.remove('dark');
-                }
-                if (hasClass) {
-                    document.body.classList.remove('dark');
-                }
-            }
-        }
-
-        useDark.addEventListener('change', function (evt) {
-            toggleDarkMode(evt.matches);
-        });
-        if (darkModeStateLocal) {
-            darkModeState = darkModeStateLocal === 'true';
-        }
-        toggleDarkMode(darkModeState);
-
-        if ($darkModeToggles.length > 0) {
-            for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
-                $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
-                    darkModeState = !darkModeState;
-                    toggleDarkMode(darkModeState);
-                });
-            }
-        }
     }, 0);
 });
diff --git a/src/templates/page.hbs b/src/templates/page.hbs
@@ -17,6 +17,64 @@
         {{/if}}
     </head>
     <body>
+          <script>
+               // Blocking script to avaoid flickering dark mode
+               // Dark mode toggle button
+               var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+               var darkModeState = useDark.matches;
+               var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+               var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+               var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+
+               function checkToggle(check) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].checked = check;
+                    }
+               }
+
+               function toggleDarkMode(state) {
+                    if (window.localStorage) {
+                         localStorage.setItem('compodoc_darkmode-state', state);
+                    }
+
+                    checkToggle(state);
+
+                    const hasClass = document.body.classList.contains('dark');
+
+                    if (state) {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.add('dark');
+                         }
+                         if (!hasClass) {
+                              document.body.classList.add('dark');
+                         }
+                    } else {
+                         for (var i = 0; i < $darkModeToggles.length; i++) {
+                              $darkModeToggles[i].classList.remove('dark');
+                         }
+                         if (hasClass) {
+                              document.body.classList.remove('dark');
+                         }
+                    }
+               }
+
+               useDark.addEventListener('change', function (evt) {
+                    toggleDarkMode(evt.matches);
+               });
+               if (darkModeStateLocal) {
+                    darkModeState = darkModeStateLocal === 'true';
+               }
+               toggleDarkMode(darkModeState);
+
+               if ($darkModeToggles.length > 0) {
+                    for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                         $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                              darkModeState = !darkModeState;
+                              toggleDarkMode(darkModeState);
+                         });
+                    }
+               }
+          </script>
 
         <div class="navbar navbar-default navbar-fixed-top d-block d-sm-none">
             <a href="{{relativeURL data.depth }}" class="navbar-brand">{{data.documentationMainName}}</a>
