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

Fix by setting dark/light theme as soon as body tag exists.

Highlight JS and Mermaid JS theming must still occur later during page load.

Opportunity to refactor this fix and existing OnReady theme code to avoid duplicate JS and reuse code.

Fix #1601

assets/js/load-theme.js

@@ -0,0 +1,31 @@
+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;
+    }
+    break;
+}
+if (isDarkTheme) {
+  document.body.classList.add("dark");
+} else {
+  document.body.classList.remove("dark");
+}

layouts/_default/baseof.html

@@ -8,6 +8,16 @@
 {{- $highlight_active_link := site.Params.main_menu.highlight_active_link | default true -}}
 <body id="top" data-spy="scroll" {{ if $show_navbar }}data-offset="70"{{end}} data-target="{{ if or .IsHome (eq .Type "widget_page") | and $highlight_active_link }}#navbar-main{{else}}#TableOfContents{{end}}" class="{{ if not (.Scratch.Get "light") }}dark{{end}} {{ if not $show_navbar }}no-navbar{{end}}">
 
+  {{/* Load day/night theme. */}}
+  {{/* Initialise default theme. */}}
+  {{ if eq (.Scratch.Get "light") true }}
+    <script>const isSiteThemeDark = false;</script>
+  {{ else }}
+    <script>const isSiteThemeDark = true;</script>
+  {{ end }}
+  {{ $load_theme := resources.Get "js/load-theme.js" }}
+  <script src="{{ $load_theme.RelPermalink }}"></script>
+
   {{ partial "search" . }}
 
   {{ partial "navbar" . }}

layouts/partials/site_js.html

@@ -42,13 +42,6 @@
     <script>const code_highlighting = false;</script>
     {{ end }}
 
-    {{/* Initialise default theme. */}}
-    {{ if eq ($scr.Get "light") true }}
-    <script>const isSiteThemeDark = false;</script>
-    {{ else }}
-    <script>const isSiteThemeDark = true;</script>
-    {{ end }}
-
     {{ if ne site.Params.search.engine 0 }}
     {{/* Configure search engine. */}}
     {{ $min_length := site.Params.search.academic.min_length | default 1 }}