[CSS] 暗黑模式的实现 - 基于系统配置和用户选择的模式切换

现今，许多网站和应用程序都视深色模式和浅色模式的切换功能为标配。此功能不仅有助于保护用户的视力，还能节约能源，同时增强用户的体验，因为它满足了用户的个性化需求。本文将详细介绍如何通过CSS在网页中实现此主题切换功能，使初学者也能轻松掌握。

基于系统设置的初始模式配置

当访问网页时，大部分用户所看到的第一屏通常都是基于他们的系统设置。如果用户的操作系统或浏览器已设置为深色模式，那么该网页也将以深色模式显示。这种行为旨在根据用户的偏好来初始化网页的样式。这样做可以减少用户的眼睛疲劳，提供更舒适的网页浏览体验。为了实现此功能，我们需要使用CSS的特殊媒体查询prefers-color-scheme。

prefers-color-scheme是什么？

prefers-color-scheme是一个CSS媒体查询特性，用于检测用户系统设置中的颜色主题偏好（例如：深色模式或浅色模式）。

可用的值：

• no-preference: 当用户的系统没有特定的主题偏好时。
• light: 当偏好浅色模式时应用。
• dark: 当偏好深色模式时应用。

应用方法

1. 默认应用浅色模式样式

:root {
  --primary-font-color: #111827;
  --secondary-font-color: #374151;
  --bg-color: #f9f9f9;
}

• :root在CSS中代表文档的最顶层元素，通常用于设置整个网页的默认值。
• 上述代码将网页的默认模式设置为浅色模式，指定了主要字体颜色、次要字体颜色以及背景色。
• --primary-font-color, --secondary-font-color, --bg-color是CSS变量，用于存储整个网页将使用的颜色值。

2. 当偏好深色模式时，应用相应的样式

@media (prefers-color-scheme: dark) {
  :root {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
  }
}

• @media (prefers-color-scheme: dark)是一个媒体查询，仅当用户的操作系统或浏览器偏好为深色模式时应用该样式。
• 这部分代码包含了当用户系统设置为深色模式时，网页样式应如何转变。
• 同样，这里也使用了CSS变量来改变主要字体颜色、次要字体颜色和背景色，以适应深色模式的样式。

这些CSS代码帮助网页根据用户的系统设置自动在深色模式和浅色模式之间切换。只有当用户选择深色模式偏好时，才会应用深色模式样式，否则默认应用浅色模式样式。

注意事项

• 并非所有浏览器都支持prefers-color-scheme，因此在实现时需要考虑兼容性问题。
• 仅依赖用户的系统设置可能是不足够的。在网站上为用户提供直接切换主题的选项是更佳的选择，相关细节将在下文中继续介绍。

根据用户偏好切换模式

网站在初始时会根据用户的系统设置来确定其模式，但用户可能会根据自身喜好调整此模式。例如，为满足用户根据环境或特定任务需求在深色模式与浅色模式之间切换，实现这一切换功能变得尤为关键。此类以用户偏好为基础的主题切换功能不仅提升了网站的灵活性，还能为用户带来更加个性化的体验。为实现此功能，我们需要结合HTML、CSS以及JavaScript技术。

实施方法

1. HTML: 增加模式切换按钮 在网页上添加可以转换深色模式和浅色模式的按钮或切换开关。

<button id="themeToggle">Dark Mode</button>

2. 默认及浅色模式样式

:root,
[data-theme='light'] {
    --primary-font-color: #111827;
    --secondary-font-color: #374151;
    --bg-color: #f9f9f9;
    --divider-color: rgba(0, 0, 0, 0.1);
}

• :root 是CSS中的根元素，我们可以在此定义变量，进而设置整个页面的基础样式。
• [data-theme='light'] 表示其data-theme属性值为'light'的元素所应用的样式。
• 本节主要定义了应用于网页的浅色模式样式。

3. 深色模式样式

[data-theme='dark'] {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
    --divider-color: rgba(255, 255, 255, 0.1);
}

• [data-theme='dark'] 表示其data-theme属性值为'dark'的元素所应用的样式。
• 本节中，我们定义了在选择深色模式时网页所应用的样式。

4. JavaScript: 实现模式切换逻辑 使用JavaScript，当点击按钮时，实现网页主题的切换。

const themeToggleButton = document.getElementById('themeToggle');

themeToggleButton.addEventListener('click', function() {
    const currentTheme = document.documentElement.getAttribute('data-theme');

    if (currentTheme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'light');
        themeToggleButton.innerText = 'Dark Mode';
    } else {
        document.documentElement.setAttribute('data-theme', 'dark');
        themeToggleButton.innerText = 'Light Mode';
    }
});

设置完成后，用户点击“深色模式”按钮，网站的主题将切换至深色模式；反之，在深色模式下点击“浅色模式”按钮，将转换至浅色模式。

在网站设计中，深色与浅色模式的切换无疑是提升用户体验的重要功能之一。通过本文，希望您能对此功能的实现方法有所了解和掌握。即使是网站开发的初学者，遵循上述指导，也能逐步在网页中有效地添加主题切换功能。