fix: dark mode toggle not working - Tailwind requires class=dark
This commit is contained in:
@@ -70,17 +70,29 @@
|
||||
|
||||
{# 主题切换脚本 #}
|
||||
<script>
|
||||
// 初始化主题
|
||||
// 初始化主题 - Tailwind darkMode: 'class' 需要 class="dark"
|
||||
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() {
|
||||
const html = document.documentElement;
|
||||
const current = html.getAttribute('data-theme');
|
||||
const next = current === 'light' ? 'dark' : 'light';
|
||||
const isDark = html.classList.contains('dark');
|
||||
const next = isDark ? 'light' : 'dark';
|
||||
|
||||
html.setAttribute('data-theme', next);
|
||||
applyTheme(next);
|
||||
localStorage.setItem('theme', next);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user