给主题增加一个深色模式

发布于 2021-08-04 主题 Hexo 前端

为了让眼睛好受点，以及让博客看起来高级一些
咱决定为博客添加一个深色模式

思路

实现的思路有几种，可以通过覆盖 CSS 样式的方式
还能通过 Media Query 来实现，这是大部分人选择的方式
咱碍于技术原因就使用更为简单的覆盖 CSS 方式了
因为懒以及抱着能用就行的态度，只实现了简单的开关以及根据系统模式进行切换，没有根据时间自动进行切换的功能

实现

既然是覆盖，那咱们就需要制作两套 CSS
关于深色模式的背景色，Google 推荐将深色表面和 100% 白色文字的对比度至少设置为为 15.8:1
以防止对比度过高让眼睛感受到疲劳

这里推荐使用 #252d38 是咱觉得比较舒服的背景色（从别的大佬那偷来的

想法就是点击开关后，根据当前使用的模式来进行 CSS 的添加、删除操作
并且可以覆盖系统模式储存的当前使用的模式值，保证下次网页加载时也是使用开关的值
同理，系统模式切换网站也要同步切换，并覆盖开关储存的值

对于不兼容的浏览器或操作系统，访客依然可以通过开关手动切换显示模式
对于兼容的浏览器或操作系统，系统模式能够实现在两种显示模式之间切换
在兼容的浏览器或操作系统上，用户还可以通过开关覆盖当前的显示模式

具体的代码实现可以看这里 darkmode

提示

说几个需要注意的地方：

系统的模式可以通过 matchMedia 获取到，封装一下就行了

const getModeFromSystem = () => { 
  window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
}

监听系统模式的改变可以使用 matchMedia 配合 addEventListener 方法

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  if (event.matches) {
    // dark
  } else {
    // light
  }
});

使用 color-scheme 属性可以让受支持的浏览器用上深色模式滚动条

在样式表中添加：

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/

/* light.css */
:root {
  color-scheme: light;
}

/* dark.css */
:root {
  color-scheme: dark;
}

也可以添加在 head 元素中

<!--
  The page supports both dark and light color schemes,
  and the page author prefers dark.

  使用这种方式的话咱是使用 js 对 content 的内容进行修改
-->

<meta name="color-scheme" content="dark light">