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

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

效果预览

暗黑模式现状

暗黑模式实现方案

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

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

未来方案：light-dark()

暗黑模式的应用

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

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

在Chrome开发工具中DevToolsSettingsPreferencesTheme可以设置light和dark模式。

1）Bootstrap

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

更多：

2）TailwindCSS

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

更多：

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

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

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

{.light{color:333;}}/styledivclass="containerlight"/divdivclass="containerdark"/div

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

%if(theme==='dark'){%linkhref=""%}else{%linkhref=""%}%divclass="container"/div

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

1）核心样式：

body{display:grid;place-items:center;--background-color:222;background-color:var(--background-color);color:var(--text-color);color-scheme:lightdark;margin-top:20px;}:where(html){--darkmode:0;container-name:root;container-type:normal;}@containerrootstyle(--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-dark:checked){--darkmode:1;}

2）部分样式解析：

html:has(333，dark对应333,support::after{content:"❌Yourbrowserdoesnotsupportlight-dark()";background-color:ccc;}@supports(color:light-dark(000)){00ff002b;}}4.暗黑模式的应用

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

1）暗黑模式图像

2）暗黑模式阴影

3）暗黑模式调色板

4）暗黑模式段落

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

UI风格和功能会看起来很酷、很时尚

通过支持对light主题敏感的用户，它可以增强可访问性，减轻他们的眼睛疲劳

它允许用户决定最舒适的内容消费方式，同时为我们提供了一种保持外观和感觉的控制方式

它有助于延长具有OLED屏幕的设备的电池寿命，因为较亮的颜色消耗更多能量

最重要的一点，暗盒模式现状非常非常受欢迎