blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cell
2024-09-27 12:48:52 +08:00
parent 954d86432f
commit c36d87fd84
7 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_core/_base.scss
+1 -1
View File
@@ -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;
}
assets/js/head/color-scheme.js
+21
View File
@@ -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');
})();
assets/js/theme.js
+2 -2
View File
@@ -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) {
layouts/_default/baseof.html
+2 -5
View File
@@ -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" . -}}
layouts/partials/head/script.html
+9
View File
@@ -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" -}}
layouts/partials/init/index.html
+1 -1
View File
@@ -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" . -}}
layouts/partials/single/comment.html
+1 -1
View File
@@ -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 -}}