22 lines
726 B
JavaScript
22 lines
726 B
JavaScript
|
// 获取切换按钮
|
||
|
|
const themeToggle = document.querySelector('.theme-controller');
|
||
|
|
|
||
|
|
// 监听变化
|
||
|
|
themeToggle.addEventListener('change', (e) => {
|
||
|
|
// 切换 HTML data-theme 属性
|
||
|
|
if(e.target.checked) {
|
||
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||
|
|
} else {
|
||
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 保存主题设置到 localStorage
|
||
|
|
localStorage.setItem('theme', e.target.checked ? 'dark' : 'light');
|
||
|
|
});
|
||
|
|
|
||
|
|
// 页面加载时检查之前的主题设置
|
||
|
|
const savedTheme = localStorage.getItem('theme');
|
||
|
|
if(savedTheme) {
|
||
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
||
|
|
themeToggle.checked = savedTheme === 'dark';
|
||
|
|
}
|