songtianlun
87e0c2eec6
- Implement theme switching functionality with a new ThemeController - Add ToastController for displaying notifications - Update various views for improved layout and styling - Introduce animations for toast notifications These changes enhance the user experience by allowing users to switch between light and dark themes and receive feedback through toast notifications. The UI has been improved for better accessibility and aesthetics.
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';
|
|
} |