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

⚡ Perf: simplify theme switching logic

Browse Source
This commit is contained in:
Cell
2022-08-27 01:11:00 +08:00
parent e19b71cc6a
commit 913a82fe18
4 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/theme.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/js/theme.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/_default/baseof.html
+1 -1
View File
@@ -18,7 +18,7 @@
<body data-header-desktop="{{ .Site.Params.header.desktopMode }}" data-header-mobile="{{ .Site.Params.header.mobileMode }}">
{{- /* Check theme isDark before body rendering */ -}}
{{- $theme := .Site.Params.defaulttheme -}}
<script>(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('{{ $theme }}' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '{{ $theme }}' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>
<script>(window.localStorage && 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">
{{- partial "header.html" . -}}
src/js/theme.js
+2 -2
View File
@@ -50,7 +50,7 @@ class FixIt {
constructor() {
this.config = window.config;
this.data = this.config.data;
this.isDark = document.body.getAttribute('data-theme') === 'dark';
this.isDark = document.body.dataset.theme === 'dark';
this.util = new Util();
this.newScrollTop = this.util.getScrollTop();
this.oldScrollTop = this.newScrollTop;
@@ -127,7 +127,7 @@ class FixIt {
initSwitchTheme() {
this.util.forEach(document.getElementsByClassName('theme-switch'), ($themeSwitch) => {
$themeSwitch.addEventListener('click', () => {
document.body.setAttribute('data-theme', document.body.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
this.isDark = !this.isDark;
window.localStorage && localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
for (let event of this.switchThemeEventSet) {