前端笔记

分享前端开发思考与感悟

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

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

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

1. CSS自定义属性(CSS变量)

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

/* define the property */
:root {
  --main-color: balck;
}
/* 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.偏好颜色方案

偏好颜色方案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);
  ...
}

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);
  ...
}

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 + * + *,
.dark:checked + * + * > h1,
.dark:checked + * + * > p {
  --bg-color: #121212;
  ...
}
/* swith to light mode when light button checked */
.light:checked,
.light:checked + *,
.light:checked + * > h1,
.light:checked + * > p {
  --bg-color: #ffffff75;
  ...
}
/* apply css variable */
* {
  background: var(--bg-color);
  ...
}

设计指南和工具

材料设计中有一些特性值得一看。

  • 对比度:深色表面和100%白色文字的对比度至少为15.8:1
  • CDepth:在较高的高度下,组件通过显示较浅的表面颜色来表示深度
  • CD饱和度:原色被去饱和,因此它们在所有海拔高度都通过Web内容可访问性指南(WCAG)的AA标准,该标准至少为4.5:1
  • 限制的颜色:大表面使用深色表面颜色,且带有很少的颜色(浅色,不饱和色和明亮色,饱和色)

使用Chrome开发工具可以帮助我们进行检查。
《如何使用纯CSS在网站上启用暗模式》

这是一个在线工具,可以帮助我们用不同的色调生成颜色-色彩阴影生成器
《如何使用纯CSS在网站上启用暗模式》

结论

这就是我想与您分享的一切。感谢您的阅读,希望本文能帮助您在网站上启用暗模式。随时留下任何意见或建议。

参考

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注