当前位置：首页 > 文章列表 > 文章 > 前端 > 暗色模式切换技巧：HTML实现全攻略

暗色模式切换技巧：HTML实现全攻略

2025-10-21 12:55:47 0浏览收藏

使用 CSS 自定义变量统一管理主题颜色

通过 CSS 自定义变量（CSS Variables），可以集中管理亮色和暗色主题的颜色值，便于切换。

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #007bff;
}
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--primary-color: #00d4ff;
}

将这些变量应用到页面元素：

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}
button.primary {
background-color: var(--primary-color);
}

利用 prefers-color-scheme 实现自动暗色模式

借助 prefers-color-scheme 媒体查询，可以让网页根据系统设置自动适配暗色模式。

@media (prefers-color-scheme: dark) {
  html {
    /* 默认加载暗色主题 */
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
}

结合 data-theme 使用更灵活：

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
}

JavaScript 实现手动主题切换按钮

添加一个按钮，允许用户手动切换主题。

用 JavaScript 控制切换逻辑：

const toggleBtn = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme') || 'auto';
// 初始化主题
if (currentTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
} else if (currentTheme === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
}
toggleBtn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
let newTheme;
if (current === 'dark') {
newTheme = 'light';
} else if (current === 'light') {
newTheme = 'auto'; // 回到系统偏好
} else {
newTheme = 'dark'; // auto 状态下点击切换为暗色
}
if (newTheme === 'auto') {
document.documentElement.removeAttribute('data-theme');
} else {
document.documentElement.setAttribute('data-theme', newTheme);
}
localStorage.setItem('theme', newTheme);
});