暗黑模式是一种设计趋势，由暗色（dark）和高亮（light）两种视觉模式组成。暗黑模式之所以成为设计或者 Web 端的热点，主要归功于 Apple 公司，该公司在 iOS 和 macOS 操作系统中加入了暗黑模式，即系统级别的两种皮肤，用户可以通过系统切换，让整个应用的颜色可以轻松切换。暗黑模式流行之后，Windows 和 谷歌也加入了暗黑模式，选多流行的网站和应用程序中都提供了暗黑模式选型。

本文将从以下几个方面深入探讨网页暗黑模式的实现：

• 效果预览
• 暗黑模式现状
• 暗黑模式实现方案
• 传统方案：类名或者样式表切换
• 现代方案：CSS变量 + @container + :has()
• 未来方案：light-dark()
• 暗黑模式的应用

如果本文对您有帮助，欢迎在关注、点赞、分享给更多需要的人。

1.效果预览

2.暗黑模式现状

暗黑模式在操作系统被支持之后，在APP、网页、浏览器中得到广泛支持，尤其是现在网页端的框架已实现的对暗黑模式的功能支持。

2.1.操作系统

以 macOS 为例，在操作系统中 Settings > 通用 面板可以切换 light 和 dark 模式。

2.2.浏览器

在 Chrome 开发工具中 DevTools > Settings > Preferences > Theme 可以设置 light 和 dark 模式。

2.3.前端框架

1）Bootstrap

Bootstrap 在 v5.3.0 版本支持了 light 和 dark 两种颜色模式，开发者可以通过 data-bs-theme 属性在 html 元素上全局切换，也可以在特定的组件和元素上切换。

更多：https://getbootstrap.com/docs/5.3/customize/color-modes/

2）Tailwind CSS

Tailwind CSS 中暗黑模式可以通过 media 和 class 两种方式进行设置，media 选项由操作系统设置，只会考虑浏览器的配色方案偏好，而 class 选项将查找 .dark 应用于 html 标签的类，通过这种方法，开发者可以手动进行偏好设置。

更多：https://tailwindcss.com/docs/dark-mode

3.暗黑模式实现方案

3.1.传统方案：类名或者样式表切换

暗黑模式最传统的实现方案就是实现两套颜色主题，包含类名切换和按条件加载样式表两种不同方案。

1）类名切换：一个样式文件 + 两套颜色类选择器：

通过一个样式文件和两套颜色类选择器，通过 Javascript 实现类名 light 或者 dark 切换。

<style>
  .container {
    .light {
      color: #ccc;
    }
    .dark {
      color: #333;
    }
  }
</style>
<div class="container light"></div>
<div class="container dark"></div>

2）样式表按需：两个样式文件 + 一套颜色类选择器：

<%if(theme === 'dark') {%>
  <link href="https://xxx.com/dark.css">
<%>} else {%>
  <link href="https://xxx.com/light.css">
<%}%>

<div class="container"></div>

3.2.现代方案：CSS变量 + @container + :has()

现代方案采用现代 CSS 属性：CSS变量、@container、:where()、:has() 等组合来实现。

1）核心样式：

body {
  display: grid;
  place-items: center;
  --background-color: #fff;
  --text-color: #222;
  background-color: var(--background-color);
  color: var(--text-color);
  color-scheme: light dark;
  margin-top: 20px;
}

:where(html) {
  --darkmode: 0;
  container-name: root;
  container-type: normal;
}

@container root style(--darkmode: 1) {
  body {
    --background-color: hsl(228, 5%, 15%);
    --text-color: hsl(228, 5%, 80%);
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --darkmode: 1;
  }
}

@media (prefers-color-scheme: light) {
  html {
    --darkmode: 0;
  }
}

html:has(#color-scheme-light:checked) {
  --darkmode: 0;
}

html:has(#color-scheme-dark:checked) {
  --darkmode: 1;
}

2）部分样式解析：

html:has(#color-scheme-dark:checked)：html 子元素含有 id 属性值为 color-scheme-dark 且 checked 属性值为 true 的元素。示例中使用的是 input[type=radio] 元素。

@media (prefers-color-scheme: light)：prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。本示例在切换系统暗黑模式时，网页的颜色也会跟着变化。

:where()：CSS 伪类函数，接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

:has()：CSS 伪类函数，通过把可容错相对选择器列表作为参数，提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

@container root style(--darkmode: 1)： 是一种条件组规则，可将样式应用于包含上下文。样式声明由条件筛选，如果条件为真，则应用于容器。当容器改变大小时，将对条件进行评估。

color-scheme: light dark：color-scheme 属性允许元素指明它可以使用哪些配色方案。当用户选择其中一种配色方案时，操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。

3.3.未来方案：light-dark()

1）light-dark() 介绍

好消息！，CSS Color Module Level 5 Specification 新增加了一个函数 light-dark()。该函数接受两个颜色值作为参数。根据您正在使用的颜色方案，它将输出第一个或第二个颜色参数。

light-dark(<color>, <color>);

如规范中描述：

This function computes to the computed value of the first color, if the used color scheme is light or unknown, or to the computed value of the second color, if the used color scheme is dark.

使用的配色方案不仅基于用户的 Light/Dark 模式设置，还基于 color-scheme 属性的值。这与系统颜色的计算方法类似。

:root {
  color-scheme: light dark;
}

/* light 对应 #333，dark 对应 #ccc */
:root {
  --text-color: light-dark(#333, #ccc); 
}

2）light-dark() 兼容性

当前，现代浏览器对 light-dark() 的支持还不太好，仅有 firefox 浏览器的最新版本支持。

2）light-dark() 支持判断

可以通过 @supports 和 CSS 伪元素来判断。

#support::after {
  content: "? Your browser does not support light-dark()";
  background-color: #ff00002b;

  display: block;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #ccc;
}
@supports(color: light-dark(#fff, #000)) {
  #support::after {
    content: "? Your browser supports light-dark()";
    background-color: #00ff002b;
  }
}

4.暗黑模式的应用

除了主要的网页颜色主题切换外，还有一些其他应用场景。

1）暗黑模式图像

2）暗黑模式阴影

3）暗黑模式调色板

4）暗黑模式段落

5.最后

网站是否启用暗黑模式，取决于不同团队、不同用户群体、不同设计风格，下面是一些推荐你开启的理由：

• UI 风格和功能会看起来很酷、很时尚
• 通过支持对 light 主题敏感的用户，它可以增强可访问性，减轻他们的眼睛疲劳
• 它允许用户决定最舒适的内容消费方式，同时为我们提供了一种保持外观和感觉的控制方式
• 它有助于延长具有 OLED 屏幕的设备的电池寿命，因为较亮的颜色消耗更多能量
• 最重要的一点，暗盒模式现状非常非常受欢迎