让网站支持黑暗模式

通过媒体查询 prefers-color-scheme 让你的网站支持黑暗模式

TIP

这个属性目前还是实验性的,要使用需要满足下面的几个条件

  1. MacOS 在 Mojave 10.14 版本以上或者 windows 10 在 1809 以上
  2. 使用支持浏览器

然后你就可以编写你的样式了

@media (prefers-color-scheme: light) {
  .prefers-color {
    --bgColor: #f3f5f7;
    --textColor: #282c34;
  }
}
@media (prefers-color-scheme: dark) {
  .prefers-color {
    --bgColor: #282c34;
    --textColor: #f3f5f7;
  }
}

.prefers-color {
  color: var(--textColor);
  background: var(--bgColor);
}
# 效果

当然目前这样的兼容性比较差,如果你需要更好的兼容性。你可以参考css-prefers-color-scheme

cssnext 中我最期待的属性

cssnext 中我最期待的属性

列举一些在下一代 css 技术中我最期待的属性

js运算符

js运算符

整理了 JavaScript 中的运算符