41 lines
995 B
JavaScript
41 lines
995 B
JavaScript
|
import path from 'path';
|
||
|
|
import { getSVGNode } from './getSVGNode.mjs';
|
||
|
|
|
||
|
|
const scripts = `
|
||
|
|
const button = document.querySelector('#darkMode');
|
||
|
|
button.onclick = () => {
|
||
|
|
const theme = document.documentElement.dataset.colorMode;
|
||
|
|
document.documentElement.setAttribute('data-color-mode', theme === 'light' ? 'dark' : 'light');
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
|
||
|
|
|
||
|
|
export function darkMode() {
|
||
|
|
const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
|
||
|
|
const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
|
||
|
|
const sunNode = getSVGNode(iconSunPath)
|
||
|
|
const moonNode = getSVGNode(iconMoonPath)
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
type: 'element',
|
||
|
|
tagName: 'button',
|
||
|
|
properties: {
|
||
|
|
id: 'darkMode',
|
||
|
|
type: 'button'
|
||
|
|
},
|
||
|
|
children: [
|
||
|
|
...sunNode,
|
||
|
|
...moonNode
|
||
|
|
]
|
||
|
|
}, {
|
||
|
|
type: 'element',
|
||
|
|
tagName: 'script',
|
||
|
|
children: [{
|
||
|
|
type: 'text',
|
||
|
|
value: scripts,
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
];
|
||
|
|
}
|