宅日记

OPPO手机都有暗色模式了，你的博客居然还没有。

prefers-color-scheme

prefers-color-scheme Safari（v12.1及以上版本），Chrome（v76及以上版本）和Firefox（v67及以上版本）都支持 。

:root {
  --background-color: #ededed;
  --color-alpha: #c3423f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #111;
    --text-color: #ededed;
  }
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

以上代码就是在根元素上定义了2个变量，然后在需要的地方使用。@media (prefers-color-scheme: dark)会在系统开启暗色模式的时候改变量的值。

虽然媒体查询的方法好用 , 但是不兼容低版本浏览器和系统 ，最重要的是不够灵活 。

写了个测试页面 , 开启暗色模式后打开页面 , 看到的div背景色是粉色则说明不支持媒体查询 .

div下面3行文本是通过js判断暗色模式是否开启 , 如果开启了暗色模式 , 正常情况应该是输出 true false “dark” .

暗色模式是否正常测试页面 请右键新标签打开查看 。因为有pjax会直接在本页打开...

class

在媒体查询之前很多博客的暗色模式都是使用这个方案 。不依赖媒体查询 。

参照几篇博客的文章折腾了一下 。与上面的媒体查询方案二选一 ，不要重复使用 。

参考过的文章好像都是动态博客 ，他们都使用cookie判断是否手动开启了暗色模式 ，但静态博客没必要使用cookie 。我改为使用localStorage 。并且判断当前环境是否处于暗色模式来兼容媒体查询方案 。

先说流程：

• 定义好css变量，再把博客需要改变颜色的元素的css的color属性值改成对应变量。

• 按钮/媒体查询/时间 只要有一个符合条件就给html标签加上dark 这个class

可以不使用css变量，直接 .dark加上要改变元素的选择器，但是这样要写一堆选择器。aplayer和valine要加!important才能让css生效。

:root {
  --color: #222;
  --color-secondary: #999;
  --border-color: #222;
}
/*当html有dark 这个class的时候变量的值就会改变*/
.dark{
  --color: #a09c9c;
  --color-secondary: #cbd0d8;
  --border-color: #a09c9c;
}
/*颜色你们自己随意*/
body{
  background-color: var(--color);
}

给html加class是因为这样就可以把js写head里了。放body里不好看。

function switchDarkMode() {
  var isDark = document.documentElement.classList.toggle('dark');
  if (isDark) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
}

把switchDarkMode这个函数绑定给切换按钮就可以了。

// 这段代码放heade里
if (localStorage.getItem('theme') === 'dark') {
  document.documentElement.classList.add('dark')
} else if (new Date().getHours() >= 21 || new Date().getHours() < 7) {
  document.documentElement.classList.add('dark')
} else if (matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark')
}

matchMedia('(prefers-color-scheme: dark)').matches是查询系统是否开启暗色模式。这样就没必要使用css媒体查询了。

第二个if里的时间条件，不需要的可以删除。

同样是白色 #fff 在chrome下比firefox更暗，firefox不支持改变滚动条样式。

同一个局域网内 , hexo s 后在手机浏览器打开 http://ip:4000 就可以在手机上预览效果 ，ip就是电脑的局域网ip。

折腾时参考过的文章

• https://web.dev/prefers-color-scheme
• https://imjad.cn/archives/code/add-night-mode-to-blog/