Domů Procházet Nápověda
Přihlásit se
xry111
/
hugo-academic
1
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

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 před 5 roky
rodič
173f6a7f60
revize
eb8748ff17
3 změnil soubory, kde provedl 41 přidání a 7 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

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