diff options
Diffstat (limited to 'js/theme-switch.js')
| -rw-r--r-- | js/theme-switch.js | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/js/theme-switch.js b/js/theme-switch.js new file mode 100644 index 00000000..4dddd304 --- /dev/null +++ b/js/theme-switch.js @@ -0,0 +1,31 @@ +document.addEventListener('DOMContentLoaded', () => { + const themeSwitch = document.getElementById('theme-switch-btn'); + const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); + + // 检查本地存储中的主题设置 + const currentTheme = localStorage.getItem('theme'); + if (currentTheme === 'dark') { + document.body.classList.add('dark-theme'); + themeSwitch.querySelector('i').classList.replace('icon-moon', 'icon-sun'); + } else if (currentTheme === 'light') { + document.body.classList.remove('dark-theme'); + } else if (prefersDarkScheme.matches) { + document.body.classList.add('dark-theme'); + themeSwitch.querySelector('i').classList.replace('icon-moon', 'icon-sun'); + } + + // 切换主题 + themeSwitch.addEventListener('click', (e) => { + e.preventDefault(); + + if (document.body.classList.contains('dark-theme')) { + document.body.classList.remove('dark-theme'); + localStorage.setItem('theme', 'light'); + themeSwitch.querySelector('i').classList.replace('icon-sun', 'icon-moon'); + } else { + document.body.classList.add('dark-theme'); + localStorage.setItem('theme', 'dark'); + themeSwitch.querySelector('i').classList.replace('icon-moon', 'icon-sun'); + } + }); +});
\ No newline at end of file |
