首頁 探索 說明
登入
xry111
/
hugo-academic
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

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 年之前
父節點
173f6a7f60
當前提交
eb8748ff17
共有 3 個文件被更改，包括 41 次插入 和 7 次删除
分割檢視 顯示文件統計
  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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

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