Home Verkennen Help
Inloggen
xry111
/
hugo-academic
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

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
George Cushen 5 jaren geleden
bovenliggende
173f6a7f60
commit
eb8748ff17
3 gewijzigde bestanden met toevoegingen van 41 en 7 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 31 0
      assets/js/load-theme.js
  2. 10 0
      layouts/_default/baseof.html
  3. 0 7
      layouts/partials/site_js.html

+ 31 - 0
assets/js/load-theme.js
Bestand weergeven 

@@ -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");
 
+}

+ 10 - 0
layouts/_default/baseof.html
Bestand weergeven 

@@ -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" . }}

+ 0 - 7
layouts/partials/site_js.html
Bestand weergeven 

@@ -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 }}