如何用纯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()：

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

2、 Prefers-color-scheme

这是一个媒体查询属性，它会检查用户设备系统处于何种模式

@media (prefers-color-scheme: dark) { 
  ... 暗夜模式下的css样式
}

@media (prefers-color-scheme: light) {
  ... 白天模式下css样式
}

Example

/* 设置白天模式背景颜色默认值*/
:root {
  --bg-color: #ffffff75;
  ...
}
/* 设置暗夜模式背景颜色默认值 */
@media (prefers-color-scheme: dark) {
  --bg-color: #121212;
  ...
}
* {
  background: var(--bg-color);
  ...
}

原文地址：这里