56 lines
2.8 KiB
HTML
56 lines
2.8 KiB
HTML
<button id="theme-toggle" class="p-2 rounded-full hover:bg-white/10 transition-colors" aria-label="切换深色模式" title="切换深色模式">
|
|
<span id="theme-toggle-light-icon" class="hidden">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</span>
|
|
<span id="theme-toggle-dark-icon" class="hidden">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<script>
|
|
// 主题切换功能
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
|
const lightIcon = document.getElementById('theme-toggle-light-icon');
|
|
const darkIcon = document.getElementById('theme-toggle-dark-icon');
|
|
|
|
// 根据当前主题显示对应图标
|
|
function updateThemeIcon() {
|
|
const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
lightIcon.classList.toggle('hidden', !isDarkMode);
|
|
darkIcon.classList.toggle('hidden', isDarkMode);
|
|
}
|
|
|
|
// 初始化主题
|
|
if (!localStorage.theme) {
|
|
// 如果用户没有设置主题，则使用系统首选项
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
}
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', localStorage.theme);
|
|
}
|
|
|
|
// 更新图标
|
|
updateThemeIcon();
|
|
|
|
// 监听按钮点击
|
|
themeToggleBtn.addEventListener('click', function() {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
|
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.theme = newTheme;
|
|
|
|
// 更新图标
|
|
updateThemeIcon();
|
|
});
|
|
});
|
|
</script>
|