js实现暗黑模式
实现暗黑模式的JavaScript方法
通过JavaScript和CSS结合实现暗黑模式切换功能，以下是具体实现步骤：
方法1：使用CSS变量切换主题
在CSS中定义两套颜色变量，通过切换类名实现主题变更：
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
.dark-mode {
--bg-color: #121212;
--text-color: #f0f0f0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background 0.3s ease;
}JavaScript切换逻辑：
const toggleBtn = document.getElementById('theme-toggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
function toggleTheme() {
document.body.classList.toggle('dark-mode');
localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
}
// 初始化检查
if (localStorage.getItem('theme') === 'dark' ||
(prefersDarkScheme.matches && !localStorage.getItem('theme'))) {
document.body.classList.add('dark-mode');
}
toggleBtn.addEventListener('click', toggleTheme);方法2：直接修改样式属性
适用于简单场景的快速实现：
function toggleDarkMode() {
const isDark = document.body.style.backgroundColor === 'rgb(18, 18, 18)';
document.body.style.backgroundColor = isDark ? '#ffffff' : '#121212';
document.body.style.color = isDark ? '#333333' : '#f0f0f0';
}方法3：使用Tailwind CSS的暗黑模式
如果使用Tailwind CSS，配置更简单：
-
在tailwind.config.js中添加：
module.exports = { darkMode: 'class', // ... } -
切换逻辑：
document.documentElement.classList.toggle('dark'); localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
注意事项
- 使用
localStorage保存用户偏好 - 添加
transition属性实现平滑过渡效果 - 考虑系统偏好设置：
window.matchMedia('(prefers-color-scheme: dark)') - 对于复杂项目，建议使用CSS变量方案维护性更好
完整示例HTML结构
<button id="theme-toggle">切换主题</button>
<script>
// 这里放置上述JavaScript代码
</script>
