fix: page flickers when user's dark/light pref differs to theme's default

Add check that admin enabled Light/Dark chooser (Params.day_night).

Fix eb8748ff17
Fix #1601

assets/js/load-theme.js

@@ -1,31 +1,47 @@
-function getThemeMode() {
-  return parseInt(localStorage.getItem('dark_mode') || 2);
-}
+(function () {
+  function getThemeMode() {
+    return parseInt(localStorage.getItem('dark_mode') || 2);
+  }
 
-let currentThemeMode = getThemeMode();
-let isDarkTheme;
-switch (currentThemeMode) {
-  case 0:
-    isDarkTheme = false;
-    break;
-  case 1:
-    isDarkTheme = true;
-    break;
-  default:
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      // The visitor prefers dark themes and switching to the dark variation is allowed by admin.
-      isDarkTheme = true;
-    } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
-      // The visitor prefers light themes and switching to the dark variation is allowed by admin.
-      isDarkTheme = false;
-    } else {
-      // Use the site's default theme variation based on `light` in the theme file.
-      isDarkTheme = isSiteThemeDark;
+  function canChangeTheme() {
+    // If var is set, then user is allowed to change the theme variation.
+    return Boolean(window.staDarkLightChooser);
+  }
+
+  function initThemeVariation() {
+    if (!canChangeTheme) {
+      return;
     }
-    break;
-}
-if (isDarkTheme) {
-  document.body.classList.add("dark");
-} else {
-  document.body.classList.remove("dark");
-}
+
+    let currentThemeMode = getThemeMode();
+    let isDarkTheme;
+    switch (currentThemeMode) {
+      case 0:
+        isDarkTheme = false;
+        break;
+      case 1:
+        isDarkTheme = true;
+        break;
+      default:
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          // The visitor prefers dark themes and switching to the dark variation is allowed by admin.
+          isDarkTheme = true;
+        } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+          // The visitor prefers light themes and switching to the dark variation is allowed by admin.
+          isDarkTheme = false;
+        } else {
+          // Use the site's default theme variation based on `light` in the theme file.
+          isDarkTheme = isSiteThemeDark;
+        }
+        break;
+    }
+    if (isDarkTheme) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
+  }
+
+  // Initialize theme variation.
+  initThemeVariation();
+})();

layouts/_default/baseof.html

@@ -10,6 +10,9 @@
 
   {{/* Load day/night theme. */}}
   {{/* Initialise default theme. */}}
+  {{ if site.Params.day_night }}
+    <script>window.staDarkLightChooser = true;</script>
+  {{ end }}
   {{ if eq (.Scratch.Get "light") true }}
     <script>const isSiteThemeDark = false;</script>
   {{ else }}