devttl/reference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add remembered theme.

Browse Source
This commit is contained in:
jaywcjlove 2022-10-01 11:59:29 +08:00
parent 53de582bb9
commit e76c245a61
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scripts/style.css
View File

@ -287,8 +287,7 @@ body.home .h1wrap p {
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1rem; padding: 1rem;
box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0,0,0,0.05); box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0,0,0,0.05);
--text-opacity: 1; color: var(--color-fg-default);
color: rgb(203 213 225/var(--text-opacity));
--bg-opacity: 0.5; --bg-opacity: 0.5;
background-color: rgb(62 69 72/var(--bg-opacity)); background-color: rgb(62 69 72/var(--bg-opacity));
transition: all .3s; transition: all .3s;

9
scripts/utils/darkMode.mjs
View File

@ -2,10 +2,17 @@ import path from 'path';
import { getSVGNode } from './getSVGNode.mjs'; import { getSVGNode } from './getSVGNode.mjs';
const scripts = ` const scripts = `
const LOCAL_NANE = '_dark_mode_theme_'
const rememberedValue = localStorage.getItem(LOCAL_NANE);
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
document.documentElement.setAttribute('data-color-mode', rememberedValue);
}
const button = document.querySelector('#darkMode'); const button = document.querySelector('#darkMode');
button.onclick = () => { button.onclick = () => {
const theme = document.documentElement.dataset.colorMode; const theme = document.documentElement.dataset.colorMode;
document.documentElement.setAttribute('data-color-mode', theme === 'light' ? 'dark' : 'light'); const mode = theme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem(LOCAL_NANE, mode);
} }
`; `;