♻️ Refactor: color scheme checking and move data-theme to document el…

…ement
hugo-fixit · Sep 27, 2024 · c36d87f · c36d87f
1 parent 954d864
commit c36d87f
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 10 deletions.
diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
@@ -30,7 +30,7 @@ body {
   color: $global-font-color;
   @include overflow-wrap(break-word);
 
-  &[data-theme='dark'] {
+  [data-theme='dark'] & {
     color: $global-font-color-dark;
     background-color: $global-background-color-dark;
   }

diff --git a/assets/js/head/color-scheme.js b/assets/js/head/color-scheme.js
@@ -0,0 +1,21 @@
+import params from '@params';
+
+/**
+ * Check theme isDark before body rendering
+ */
+(function () {
+  const localStorage = window.localStorage;
+  if (!localStorage) {
+    return;
+  }
+  let isDark = false;
+  const themeUsed = localStorage.getItem('theme');
+  if (themeUsed) {
+    isDark = themeUsed === 'dark';
+  } else {
+    isDark = params.defaultTheme === 'auto' ?
+      window.matchMedia('(prefers-color-scheme: dark)').matches :
+      params.defaultTheme === 'dark';
+  }
+  isDark && (document.documentElement.dataset.theme = 'dark');
+})();
diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -3,7 +3,7 @@ import Util from './util';
 class FixIt {
   constructor() {
     this.config = window.config;
-    this.isDark = document.body.dataset.theme === 'dark';
+    this.isDark = document.documentElement.dataset.theme === 'dark';
     this.util = new Util();
     this.newScrollTop = this.util.getScrollTop();
     this.oldScrollTop = this.newScrollTop;
@@ -89,7 +89,7 @@ class FixIt {
   initSwitchTheme() {
     this.util.forEach(document.getElementsByClassName('theme-switch'), ($themeSwitch) => {
       $themeSwitch.addEventListener('click', () => {
-        document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
+        document.documentElement.dataset.theme = this.isDark ? 'light' : 'dark';
         this.isDark = !this.isDark;
         window.localStorage?.setItem('theme', this.isDark ? 'dark' : 'light');
         for (let event of this.switchThemeEventSet) {

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -14,15 +14,12 @@
     {{- partial "head/meta.html" . -}}
     {{- partial "head/link.html" . -}}
     {{- partial "head/seo.html" . -}}
+    {{- partial "head/script.html" . -}}
+    {{- /*  TODO preload script https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/rel/preload */ -}}
     {{- /* Custom head */ -}}
     {{- block "custom-head" . }}{{ end -}}
   </head>
   <body data-header-desktop="{{ .Site.Params.header.desktopMode }}" data-header-mobile="{{ .Site.Params.header.mobileMode }}">
-    {{- /* Check theme isDark before body rendering */ -}}
-    {{- /* TODO resources.ExecuteAsTemplate */ -}}
-    {{- $theme := .Site.Params.defaulttheme -}}
-    <script>(window.localStorage?.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('{{ $theme }}' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '{{ $theme }}' === 'dark')) && document.body.setAttribute('data-theme', 'dark');</script>
-
     {{- /* Body wrapper */ -}}
     <div class="wrapper" data-page-style="{{ (partial `function/params.html`).pageStyle | default `normal` }}">
       {{- partial "header.html" . -}}

diff --git a/layouts/partials/head/script.html b/layouts/partials/head/script.html
@@ -0,0 +1,9 @@
+{{- $fingerprint := .Scratch.Get "fingerprint" -}}
+
+{{- /* Check theme isDark before body rendering */ -}}
+{{- $options := dict "targetPath" "js/head/color-scheme.min.js" "minify" hugo.IsProduction -}}
+{{- $options := dict "defaultTheme" .Site.Params.defaulttheme | dict "params" | merge $options -}}
+{{- if not hugo.IsProduction -}}
+  {{- $options = dict "sourceMap" "external" | merge $options -}}
+{{- end -}}
+{{- dict "Source" (resources.Get "js/head/color-scheme.js") "Build" $options "Fingerprint" $fingerprint | partial "plugin/script.html" -}}
diff --git a/layouts/partials/init/index.html b/layouts/partials/init/index.html
@@ -1,4 +1,4 @@
-{{- .Scratch.Set "version" "v0.3.12-314d24a3" -}}
+{{- .Scratch.Set "version" "v0.3.12-01d42625" -}}
 {{- .Scratch.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}

diff --git a/layouts/partials/single/comment.html b/layouts/partials/single/comment.html
@@ -153,7 +153,7 @@
       {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
       {{- $source := $cdn.walineJS | default "lib/waline/waline.js" -}}
       {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
-      {{- $commentConfig = dict "el" "#waline" "serverURL" $waline.serverURL "lang" .Lang "dark" "body[data-theme='dark']" | dict "waline" | merge $commentConfig -}}
+      {{- $commentConfig = dict "el" "#waline" "serverURL" $waline.serverURL "lang" .Lang "dark" "html[data-theme='dark']" | dict "waline" | merge $commentConfig -}}
       {{- $commentConfig = dict "copyright" true "imageUploader" false "highlighter" false "texRenderer" false "search" false | dict "waline" | merge $commentConfig -}}
       {{- with $waline.pageview -}}
         {{- $commentConfig = dict "pageview" . | dict "waline" | merge $commentConfig -}}