39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
// 主题切换功能
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const themeSwitcher = document.getElementById('theme-switcher');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
|
|
// 检查本地存储中的主题偏好
|
|
const savedTheme = localStorage.getItem('theme');
|
|
|
|
// 检查系统偏好
|
|
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
// 设置初始主题
|
|
if (savedTheme) {
|
|
document.body.classList.toggle('dark-mode', savedTheme === 'dark');
|
|
updateThemeIcon(savedTheme === 'dark');
|
|
} else {
|
|
document.body.classList.toggle('dark-mode', prefersDarkMode);
|
|
updateThemeIcon(prefersDarkMode);
|
|
}
|
|
|
|
// 主题切换事件
|
|
themeSwitcher.addEventListener('click', function() {
|
|
const isDarkMode = document.body.classList.toggle('dark-mode');
|
|
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
|
|
updateThemeIcon(isDarkMode);
|
|
});
|
|
|
|
function updateThemeIcon(isDarkMode) {
|
|
if (isDarkMode) {
|
|
themeIcon.classList.remove('fa-moon');
|
|
themeIcon.classList.add('fa-sun');
|
|
} else {
|
|
themeIcon.classList.remove('fa-sun');
|
|
themeIcon.classList.add('fa-moon');
|
|
}
|
|
}
|
|
});
|
|
|