在CSS中，如何实现暗模式？

在CSS中实现暗模式可以通过多种方式完成，这主要取决于你希望暗模式如何触发：自动基于用户系统偏好，或是通过网站上的一个开关手动切换。以下是两种实现暗模式的方法。

1. 自动暗模式（基于媒体查询）
CSS 提供了一个媒体查询 prefers-color-scheme，它可以检测用户系统的主题偏好（亮色或暗色）。如果你想让网站自动匹配用户的系统偏好，可以使用此方法。

示例代码

/* 默认的亮色主题样式 */
body {
    background-color: #fff;
    color: #333;
}

/* 暗色主题样式 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #fff;
    }

    a {
        color: #1a73e8;
    }
}

在这个示例中，当用户设备设置为暗模式时，网站背景将变为深色，文字变为白色。

2. 手动切换暗模式（通过 JavaScript 和 CSS 变量）
如果你想在网站上提供一个切换暗模式的按钮，可以使用 JavaScript 来动态更改 CSS 变量，并利用这些变量在 CSS 中定义颜色。

HTML 结构

<button id="theme-toggle">Toggle Dark Mode</button>

CSS 使用自定义属性

:root {
    --background-color: #fff;
    --text-color: #333;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.dark-mode {
    --background-color: #333;
    --text-color: #fff;
}
JavaScript 切换类
javascript
Copy code
document.getElementById('theme-toggle').addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
});

在这个示例中，当用户点击切换按钮时，body 元素的类会切换，从而切换定义在 CSS 变量中的颜色，实现亮色和暗色主题的转换。

3. 存储用户偏好
为了保持用户的主题选择跨会话一致，可以使用 localStorage 在浏览器中存储用户的偏好。

const themeToggleButton = document.getElementById('theme-toggle');

// 检查存储的主题偏好
function loadTheme() {
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme) {
        document.body.classList.add(storedTheme);
    }
}

// 切换主题并存储偏好
themeToggleButton.addEventListener('click', function() {
    const isDarkMode = document.body.classList.toggle('dark-mode');
    localStorage.setItem('theme', isDarkMode ? 'dark-mode' : 'light-mode');
});

// 在页面加载时应用存储的主题
window.onload = loadTheme;

这段代码在用户切换主题时将其偏好保存到 localStorage，并在页面加载时应用这些偏好设置。

通过这些方法，你可以灵活地为网站添加暗模式支持，无论是自动匹配系统设置还是允许用户手动切换主题。