为我的网站添加深色模式

我们为什么需要「深色模式」

不可避免的，我们在很多时候需要在黑暗的环境下访问网站，而在黑暗的环境下，如果网站依然有大部分亮色区域，会在瞬间使眼睛受到刺激，极大的降低了用户体验。

同时，深色模式能减少OLED屏幕的功耗，延长设备的使用时间这也是很多人在白天也依然打开深色模式的原因。

如今，很多操作系统已经支持了深色模式，macos也提供了很好的深色模式支持。Chrome、FireFox等主流浏览器也已经支持通过 prefers-color-scheme单独定义深色模式下的样式，这也降低了我们制作深色模式的难度。

「深色模式」的切换逻辑

前面提到，我们可以通过 prefers-color-scheme来单独定义深色模式的样式，而 prefers-color-scheme是跟随系统的，显然，这种方式可以较好符合用户的个人喜好。

`prefers-color-scheme`的兼容问题

的确，prefers-color-scheme对于低版本的浏览器适配并不友好，但是考虑到本站用户群体，这种问题几乎不会发生(其实是我懒)，所以就没有做过多处理。

「深色模式」的前端实现

单独编写样式

css

body {
  color: #000;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
  }
}

显然，这种方式繁琐且复杂。

使用CSS Variable

本站的配色信息都是以CSS Variable的形式存放在一个单独的css(global.css)中的，并在其他的css文件中可以直接通过 var(xxxx)引用，所以，我们可以为深色模式和亮色模式设计两种配色，并通过第一种方法实现，就可以实现自动的深色模式切换。

css

:root {
  --bg: #f2f5f8;
  --card-bg: #fff;
  --text: #000;
  --link: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --card-bg: #161b22;
    --text: #c9d1d9;
    --link: #58a6ff;
  }
}

本站就是用的这种方法，在你的系统设置中切换配色即可体验。