如何使用纯 CSS 在您的网站上启用暗模式？

如今，越来越多的设备开始支持暗黑模式。因此，未来我们不可避免地需要创建支持暗黑模式的网站。在本文中，我将向您展示一些仅使用纯 CSS 即可在您的网站上启用暗黑模式的技巧。此外，我还将向您展示一些在设计支持暗黑模式的网站时可以使用的工具和技巧。

首先，让我们介绍一些我们将在示例中使用的 CSS。

1. CSS自定义属性（CSS变量）

我们可以定义一个自定义属性，然后通过var()

/* define the property */
:root {
  --main-color: black;
}
/* use the property */
p {
  color: var(--main-color);
}

var()支持第二个参数作为后备。

p {
  color: var(--main-color, darkgray);
}

我们可以var()在里面使用var()。

p {
  color: var(--main-color, var(--second-color));
}

2. 偏好配色方案

prefers-color-scheme CSS 媒体功能用于检测用户是否要求系统使用浅色或深色主题。

@media (prefers-color-scheme: dark) { 
  ... some style for dark mode
}

@media (prefers-color-scheme: light) {
  ... some style for light mode
}

不幸的是，IE 不支持这两个属性。对于 CSS 变量，我个人更喜欢使用 SASS mixin 的解决方案。你也可以在 GitHub 上找到其他一些解决方案。

示例

现在我们知道了如何使用这些 CSS 属性。让我们开始示例吧。

1. 加载系统设置

这个想法很简单。只需将所有颜色设置为自定义属性。然后执行媒体查询来切换设置。

/* set light mode color as default value */
:root {
  --bg-color: #ffffff75;
  ...
}
/* switch to dark mode color */
@media (prefers-color-scheme: dark) {
  --bg-color: #121212;
  ...
}
/* apply CSS varaible through var() */
* {
  background: var(--bg-color);
  ...
}

https://codepen.io/oahehc/pen/wvBqjMR

2. 带切换按钮的开关

由于某些设备尚不支持暗黑模式，因此我们仍然需要为用户提供切换按钮，以便在亮黑模式之间切换。
这里我们使用复选框，以便通过 CSS 访问选中状态。

/* light mode colors */
:root {
  --bg-color: #ffffff75;
  ...
}
/* apply dark mode colors when button is checked */
input:checked, input:checked + * {
  --bg-color: #121212;
  ...
}
/* apply CSS varaible through var() */
* {
  background: var(--bg-color);
  ...
}

https://codepen.io/oahehc/pen/OJPjZXB

3. 结合两者

为了获得更好的用户体验，我们可以将上面的两个示例结合起来。加载系统设置作为默认设置。然后显示切换按钮供用户自定义。

<!-- we will need two buttons -->
<input class="dark" type="checkbox" />
<input class="light" type="checkbox" />
<article>
  ...
</article>

/* deafult light mode color */
:root {
  --bg-color: #ffffff75;
  ...
}
/* hide light button if system setting is light mode */
@media (prefers-color-scheme: light) {
  .light {
    display: none;
  }
}
/* hide dark button if system setting is dark mode and apply dark mode colors */
@media (prefers-color-scheme: dark) {
  .dark {
    display: none;
  }
  --bg-color: #121212;
  ...
}
/* swith to dark mode when dark button checked */
.dark:checked,
.dark:checked + * + * {
  --bg-color: #121212;
  ...
}
/* swith to light mode when light button checked */
.light:checked,
.light:checked + * {
  --bg-color: #ffffff75;
  ...
}
/* apply css variable */
* {
  background: var(--bg-color);
  ...
}

https://codepen.io/oahehc/pen/GRgvdxw

设计指南和工具

有一些来自材料设计的属性值得一看。

对比度：深色表面和 100% 白色正文的对比度至少为 15.8:1
CDepth：在较高的海拔高度，组件通过显示较浅的表面颜色来表达深度
CDesaturation：原色被去饱和，因此它们在所有高度级别上都符合 Web 内容可访问性指南 (WCAG) AA 标准，至少为 4.5:1
有限的颜色：大面积表面使用深色表面颜色，并带有有限的色彩强调（浅色、不饱和色和明亮、饱和色）

使用 Chrome dev-tool 可以帮助我们检查。

这里有一个在线工具可以帮助我们生成具有不同色调的颜色 -颜色色调生成器。

结论

这就是我想和大家分享的全部内容。感谢您的阅读，希望本文能帮助您在网站上启用暗黑模式。欢迎留下任何评论或建议。

参考

鏂囩珷鏉ユ簮锛�https://dev.to/oahehc/how-to-enable-dark-mode-on-your-website-with-pure-css-ake