暗色模式适配笔记

Matt-wzy 2022-12-31

没错，这个看上去不怎么灵巧的有点呆的暗色模式就是我根据原站模板改出来的，快点进来我告诉你这玩意怎么玩

暗色模式基本工作原理

一句话，CSS，网页的显示渲染来源由其本身的元素和控制元素位置以及其他信息的css组成，简单来看就是HTML告诉你网页里有什么，CSS告诉你那些东西到底要摆在哪，怎么摆，是不是透明的，到底要不要显示出来。其中常被用于切换暗色亮色模式的给body 加dark-mode 的class标签的方法可以让开发者在css文件中使用.dark-mode选择器选中并控制其样式，非常简单好用，当然，如果你不需要允许用户手动选择的话，@media (prefers-color-scheme: dark){} ， @media (prefers-color-scheme: light){} 媒体选择器是官方给出的方案（哪个官方来着？我给忘了🤣）

实现大体思路

黑暗模式主要就是文本颜色背景颜色和图片亮度降低这三个操作，其他的操作由于远离一样不另行展示。另外，如果你使用的网站模板中已经适配好暗色模式的话，不建议你上手一行行改代码，没有意义。我是因为我的这个模板不支持暗色模式亮色模式所以我自学来切换的。

1. 使用媒体选择器法（不推荐，但是最简单）

先说优缺点，优点：配置简单，只需要动css不需要修改html，只需要关注你想要修改的部分，不用关心具体怎么切换。缺点：用户除非切换系统配色，否则无法切换网站配色，在手机上还好说毕竟都有自动夜间模式切换，但是到了电脑上由于此方案无法给出切换按钮故用户可能无法或者很难切换网站的亮暗。

原理很简单，实现原理就是给你涉及到颜色部分添加上@media (prefers-color-scheme: dark){} ， @media (prefers-color-scheme: light){} 媒体选择器即可其中light就是亮色，dark就是暗色，比如说本站的css中有如下的部分

body {
  font-family: $base-font;
  color: rgb(0, 0, 0);
  line-height: 1.7em;
  background-color: rgb(255, 255, 255);
}

其中color: rgb(0, 0, 0) 表示了字体使用的颜色为rgb(0, 0, 0)，也就是黑色，而background-color: rgb(255, 255, 255);表示了网页背景使用的颜色为rgb(255, 255, 255)，也就是白色。当然，这是亮色模式下的配色，没有问题，但如果大面积的白色背景到了晚上会亮瞎人的双眼，这不是我们想要达到的效果，所以我们希望能有暗色模式切换。我们只需要对上述的代码做如下改动即可：

@media (prefers-color-scheme: light){
  body {
    font-family: $base-font;
    color: rgb(0, 0, 0);
    line-height: 1.7em;
    background-color:rgb(255, 255, 255)
  }
}
@media (prefers-color-scheme: dark){
  body {
    font-family: $base-font;
    color: rgb(255, 255, 255);
    line-height: 1.7em;
    background-color: rgb(0, 0, 0);
  }
}

这样，我们就可以在不用改动网页html代码的前提下，配合媒体选择器，让网页自动适配客户端系统的亮色暗色模式，让用户在暗色模式下看到的字体为白色，背景为黑色。当然，这只是一个粗略的演示，用来表示我们可以这样做以达到在不同颜色模式下切换显示效果的目的，而通常意义的暗色模式网页改动不只有颜色，其中字体、文字粗细、字间距等等其他一系列的涉及视觉效果的参数也要变动以达到统一以及美观的效果，比如说同样字号，黑色背景下的白色字总比白色背景下的黑色字要显得胖一些，这就需要对字体大小进行微调以达到让用户观感相同的效果。此外，暗色模式背景中纯黑色并非是用户体验的最佳选择，没有特殊情况下都会是掺有部分白色的黑色

2. 使用class等标签加到body上，配合css类选择器

上面的方法虽然简单、不需要改动网页框架就可以实现切换效果，但是用户无法单独为网站切换亮暗模式，如果有些用户希望自己的系统长期保持夜间模式，而白天黑色背景下的白字阅读困难，如果此时用户无法手动切换网页样式而是只能通过切换系统亮暗色模式的话对他们很不友好，我们可以通过与第一种方案略微不同的方案实亮暗切换。用class标签打到body中配合css切换亮暗色的优点是配合我们写的按钮，用户可手动控制当前网站的亮暗切换。缺点是需要自己写按钮以及控制亮暗切换的逻辑，如果您是纯新手小白可能这一步骤会比较困难；此外，亮暗切换的逻辑以及配合系统亮暗切换网站亮暗切换的监听都需要我们通过JavaScript脚本实现，略有复杂。

原理与上面的有些区别，css选择器中 .xxx可以允许你选中class为xxx的元素，我们只需要用JavaScript脚本将<body> 变为 <body class='dark-mode'> 配合css中.dark-mode的元素选择器即可实现针对暗色模式的配置。

CSS部分，我们还是拿上面的例子，修改过后的代码为：

body {
  font-family: $base-font;
  color: rgb(0, 0, 0);
  line-height: 1.7em;
  background-color:rgb(255, 255, 255)
}

body.dark-mode{
  font-family: $base-font;
  color: rgb(255, 255, 255);
  line-height: 1.7em;
  background-color: rgb(0, 0, 0);
}

代码和上面的类似，但是原理大不相同。至于其他元素，你可以在外侧直接加一个.dark-mode{}将原来的部分套在这个代码段中。

但是到目前为止，我们还没有讲述如何给<body>添加class标签。

你只需要一个JavaScript代码即可，想要在网页中使用这段代码，你需要将代码段插入html中的head或body中即可

  <script>
    // something here
  </script>

切换暗色模式的核心代码为

<script>
  // 定义 darkMode 函数
  function darkMode() {
    // 获取页面的 body 元素
    var body = document.body;

    // 切换 body 元素的 dark-mode 类
    body.classList.toggle("dark-mode");
  }
</script>

而如果您希望调用这段代码，可以使用按钮触发

<button onclick="darkMode()">切换黑暗模式</button>

将按钮添加到body中，脚本放到head或者您喜欢的位置，您就可以尝试感受手动切换黑暗模式带来的成就了。

结语

本文到此处就大致结束了，其实很有很多可以写的东西没有写出来，有些遗憾，比如处理img的filter: brightness(.8); ，针对aplayer的（tips：Diygod为什么不给他的播放器适配暗色模式啊QwQ）

.dark-mode{
  .aplayer-info{
      background-color: $background-color-dark;
      color: $text-color-dark;
  }
  .aplayer .aplayer-lrc:before{
    height:0 !important;
  }
  .aplayer .aplayer-lrc:after{
    height:0 !important;
  }
  .aplayer .aplayer-list ol li.aplayer-list-light{background:#212529 !important;}
  .aplayer .aplayer-list ol li:hover{background:#212529 !important;}
  .aplayer{background:#212529 !important;}

}

由于篇幅问题无法细讲，再有本文的css也并非是直接的css而是scss，中间需要通过jekyll编译，输出的最终结果才是css，这之间的关系也没细讲。外加所有文末都有的评论系统调试中遇上的问题也未能细讲。

本站开源，你可以通过站尾的github图标找到网站的源代码，如果你需要CSS详细配置信息，style.scss里面可能会有你需要的内容

22/12/31腹泻式更新不是因为更新的内容多，而是因为本人没有搭建本地编译环境所以改完一段代码需要上传等github自动编译或后才能看到效果，对此产生的不便深表歉意。外加本人并非前端专业，所述之处若有谬误，请及时指出，感激不尽。