49 lines
1.1 KiB
JavaScript
49 lines
1.1 KiB
JavaScript
function themeToggle() {
|
|
let oldValue = localStorage.getItem('theme');
|
|
if (!oldValue) {
|
|
oldValue = 'light';
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
oldValue = 'dark';
|
|
}
|
|
}
|
|
|
|
let newValue;
|
|
if (oldValue == 'light') {
|
|
newValue = 'dark';
|
|
} else if (oldValue == 'dark') {
|
|
newValue = 'light';
|
|
}
|
|
localStorage.setItem('theme', newValue);
|
|
themeRefresh();
|
|
}
|
|
|
|
function themeClear() {
|
|
localStorage.setItem('theme', '');
|
|
themeRefresh();
|
|
}
|
|
|
|
function themeRefresh() {
|
|
const theme = localStorage.getItem('theme')
|
|
const el = document.getElementsByTagName('html')[0];
|
|
if (theme == 'light') {
|
|
el.setAttribute('theme', 'light');
|
|
} else if (theme == 'dark') {
|
|
el.setAttribute('theme', 'dark');
|
|
} else {
|
|
el.setAttribute('theme', '');
|
|
}
|
|
}
|
|
|
|
function main() {
|
|
const buttonToggle = document.getElementsByClassName('theme-toggle');
|
|
for (const el of buttonToggle) {
|
|
el.onclick = themeToggle;
|
|
}
|
|
const buttonClear = document.getElementsByTagName('theme-clear');
|
|
for (const el of buttonClear) {
|
|
el.onclick = themeClear;
|
|
}
|
|
themeRefresh();
|
|
}
|
|
|
|
addEventListener('DOMContentLoaded', main);
|