From c36d87fd846014572ee6332fe83286418c6e2c0b Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Fri, 27 Sep 2024 12:48:52 +0800 Subject: [PATCH] :recycle: Refactor: color scheme checking and move data-theme to document element --- assets/css/_core/_base.scss | 2 +- assets/js/head/color-scheme.js | 21 +++++++++++++++++++++ assets/js/theme.js | 4 ++-- layouts/_default/baseof.html | 7 ++----- layouts/partials/head/script.html | 9 +++++++++ layouts/partials/init/index.html | 2 +- layouts/partials/single/comment.html | 2 +- 7 files changed, 37 insertions(+), 10 deletions(-) create mode 100644 assets/js/head/color-scheme.js create mode 100644 layouts/partials/head/script.html diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss index e17b9d68..03b88865 100644 --- 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 new file mode 100644 index 00000000..34578579 --- /dev/null +++ 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 index cb011cd1..d5d70c4e 100644 --- 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 index 14668a42..4024a04e 100644 --- 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 -}} - {{- /* Check theme isDark before body rendering */ -}} - {{- /* TODO resources.ExecuteAsTemplate */ -}} - {{- $theme := .Site.Params.defaulttheme -}} - - {{- /* Body wrapper */ -}}
{{- partial "header.html" . -}} diff --git a/layouts/partials/head/script.html b/layouts/partials/head/script.html new file mode 100644 index 00000000..20fe901c --- /dev/null +++ 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 index 8dc84e70..8e3107e9 100644 --- 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 index 559b666f..5093ed93 100644 --- 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 -}}