Home Explore Help
Sign In
xry111
/
hugo-academic
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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 years ago
parent
173f6a7f60
commit
eb8748ff17
3 changed files with 41 additions and 7 deletions
Unified View Show 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
View File 

@@ -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
View File 

@@ -8,6 +8,16 @@
 
 {{- $highlight_active_link := site.Params.main_menu.highlight_active_link | default true -}}
 
 {{- $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}}">
 
 <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 "search" . }}
 
 
 
   {{ partial "navbar" . }}
 
   {{ partial "navbar" . }}

+ 0 - 7
layouts/partials/site_js.html
View File 

@@ -42,13 +42,6 @@
 
     <script>const code_highlighting = false;</script>
 
     <script>const code_highlighting = false;</script>
 
     {{ end }}
 
     {{ 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 }}
 
     {{ if ne site.Params.search.engine 0 }}
 
     {{/* Configure search engine. */}}
 
     {{/* Configure search engine. */}}
 
     {{ $min_length := site.Params.search.academic.min_length | default 1 }}
 
     {{ $min_length := site.Params.search.academic.min_length | default 1 }}