fix: dark mode toggle not working - Tailwind requires class=dark

This commit is contained in:
2026-03-15 07:55:29 +08:00
parent eb233b5e4d
commit 899914d0a0

View File

@@ -70,17 +70,29 @@
{# 主题切换脚本 #} {# 主题切换脚本 #}
<script> <script>
// 初始化主题 // 初始化主题 - Tailwind darkMode: 'class' 需要 class="dark"
const savedTheme = localStorage.getItem('theme') || 'light'; const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme); applyTheme(savedTheme);
// 应用主题
function applyTheme(theme) {
const html = document.documentElement;
if (theme === 'dark') {
html.classList.add('dark');
html.setAttribute('data-theme', 'dark');
} else {
html.classList.remove('dark');
html.setAttribute('data-theme', 'light');
}
}
// 主题切换函数 // 主题切换函数
function toggleTheme() { function toggleTheme() {
const html = document.documentElement; const html = document.documentElement;
const current = html.getAttribute('data-theme'); const isDark = html.classList.contains('dark');
const next = current === 'light' ? 'dark' : 'light'; const next = isDark ? 'light' : 'dark';
html.setAttribute('data-theme', next); applyTheme(next);
localStorage.setItem('theme', next); localStorage.setItem('theme', next);
} }