From 70cbc5b90ae8e753c8ef549d4ab2bfe84ccabb8d Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Tue, 25 Aug 2020 22:02:38 +0100
Subject: [PATCH] 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 eb8748ff17996f04ee8a472ad997a2d4ae9410f6
Fix #1601
---
 assets/js/load-theme.js      | 74 ++++++++++++++++++++++--------------
 layouts/_default/baseof.html |  3 ++
 2 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/assets/js/load-theme.js b/assets/js/load-theme.js
index cf44d798..f793132b 100644
--- a/assets/js/load-theme.js
+++ b/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();
+})();
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index b1d28da3..80366aa0 100644
--- a/layouts/_default/baseof.html
+++ b/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 }}