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