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

website: update dark theme issue.

Browse Source
This commit is contained in:
jaywcjlove 2022-11-20 03:37:25 +08:00
parent 98eae38934
commit 79dcdc7379
4 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
scripts/js/dark.js Normal file
View File

@ -0,0 +1,12 @@
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');
button.onclick = () => {
const theme = document.documentElement.dataset.colorMode;
const mode = theme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem(LOCAL_NANE, mode);
}

13
scripts/js/main.js
View File

@ -1,16 +1,3 @@
/** ==========dark theme============== */
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');
button.onclick = () => {
const theme = document.documentElement.dataset.colorMode;
const mode = theme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem(LOCAL_NANE, mode);
}
/** ==========anchor============== */
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
window.onhashchange = function () {

4
scripts/nodes/header.mjs
View File

@ -6,7 +6,7 @@ import { darkMode } from '../utils/darkMode.mjs';
const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg');
const ICONS_SEARCH_PATH = path.resolve(process.cwd(), 'scripts/assets/search.svg');
export function header({ homePath, githubURL = '' }) {
export function header({ homePath, githubURL = '', isHome } = {}) {
const svgNode = getSVGNode(ICONS_PATH);
const svgSearchNode = getSVGNode(ICONS_SEARCH_PATH);
const data = [
@ -50,7 +50,7 @@ export function header({ homePath, githubURL = '' }) {
label: '编辑',
children: [editor],
},
...darkMode(),
...darkMode({ homePath, isHome }),
{
menu: true,
href: 'https://github.com/jaywcjlove/reference',

11
scripts/utils/darkMode.mjs
View File

@ -3,11 +3,13 @@ import { getSVGNode } from './getSVGNode.mjs';
const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
export function darkMode() {
export function darkMode({ homePath = '', isHome } = {}) {
const relativePath = homePath.replace(/\/?index.html$/, isHome ? '' : '/');
const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
const sunNode = getSVGNode(iconSunPath);
const moonNode = getSVGNode(iconMoonPath);
const darkJSUrl = relativePath + 'js/dark.js';
return [
{
type: 'element',
@ -18,5 +20,12 @@ export function darkMode() {
},
children: [...sunNode, ...moonNode],
},
{
type: 'element',
tagName: 'script',
properties: {
src: darkJSUrl,
},
},
];
}