利用CSS3自定义属性来为网站添加“暗黑模式”(暗色模式/DarkMode)
最新回答
清炒黄油条
2022-03-20 22:00:12
利用CSS3自定义属性实现暗黑模式，是一种高效且易于维护的方案。以下是具体实现步骤：
1. 定义CSS变量在:root中定义全局变量，分别设置亮色和暗色模式的颜色值：
:root { /* 亮色模式变量 */ --bg-color: #fff; --text-color: #4A4A4A; --logo-url: url(../images/logo.png);}/* 暗色模式变量（可通过JS动态切换） */[data-theme="dark"] { --bg-color: #292a2d; --text-color: #a9a9b3; --logo-url: url(../images/logo_dark.png);}2. 应用变量到样式在需要动态切换的元素中使用var()引用变量：
body { background-color: var(--bg-color); color: var(--text-color);}.logo { background-image: var(--logo-url);}3. JavaScript切换逻辑通过JS监听用户操作（如按钮点击），动态切换主题并保存状态：
const themeToggle = document.getElementById("theme-toggle");const currentTheme = localStorage.getItem("theme") || "light";// 初始化主题if (currentTheme === "dark") { document.documentElement.setAttribute("data-theme", "dark");}// 切换主题函数function toggleTheme() { const isDark = document.documentElement.getAttribute("data-theme") === "dark"; const newTheme = isDark ? "light" : "dark"; document.documentElement.setAttribute("data-theme", newTheme); localStorage.setItem("theme", newTheme);}// 绑定事件themeToggle.addEventListener("click", toggleTheme);4. 持久化用户选择使用localStorage保存用户偏好，页面刷新时自动加载：
// 页面加载时检查本地存储document.addEventListener("DOMContentLoaded", () => { const savedTheme = localStorage.getItem("theme"); if (savedTheme) { document.documentElement.setAttribute("data-theme", savedTheme); }});5. 系统偏好适配（可选）通过prefers-color-scheme媒体查询自动适配系猜陆统主题：
@media (prefers-color-scheme: dark) { :root { --bg-color: #292a2d; --text-color: #a9a9b3; --logo-url: url(../images/logo_dark.png); }}关键优势- 维护性：只需修改少量变量即可全局穗漏顷生效，避免多套CSS文件的冗余。
- 性能：直接通过CSS变量切换，无需重新加载样式表。
- 用户体验：结合本地存储和系统偏好，提供无缝切换体验。
通过以上步骤，即可实现一个高效、可维护的暗黑模式切换功能。
热门标签
