关于html页面图标的夜间模式自动变色实现（夜间模式适配）

记录背景

最近挺忙，但突然又有了折腾网站的兴致。笔记网站使用的是Akina For Typecho主题，偶然发现这个风格很是喜欢。然后发现一个细节问题就是网站的图标，一般情况下，不开启夜间模式倒没什么，在开启夜间模式后，就会明显的遇到一个问题，就是如果图标是浅色，那白天模式就有些不明显，同理如果是深色，那夜间就有同样情况。

起初的解决办法很简单，创建一个灰色的图标，折中一下，但问题是真的不太搭。

然后就是使用黑白两种颜色合在一起，比如黑色描边，白色填充，当然这样也有显然问题，反正没人看所以凑合着过了这么一段时间。

这次看着不顺眼，就决定改一下。

想法很简单，我的图标只是为了好看丢丢，整的点花里胡哨的字母，事实上不用这个也不会影响什么，这次记录是要用图标的情况。所以呢，要实现的就是白天显示黑色，夜晚显示白色，就这样。

为了方便解释，这里单独建一个index.html来演示，而最终思路就是，利用css的filter过滤器和prefers-color-scheme媒体特性实现昼夜颜色自动反转，特点就是不需要js代码（实际上最初想法就是js调整或者直接创建两个图标换着来好了，意外收获）。

图标资源是一个黑色字母的背景透明的png图片。

编写代码

xml 复制代码

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>自动变色</title>
         <style>
             /* 
             这里可以当作图标在日间模式下的一些参数设定
             比如这里设置个背景颜色让图片明显一点
             */
             #icon {
                 background-color: rgb(63, 127, 170);
             }
             /* 为了方便直观，这里再添加一个文字显示 */
             #mode::before {
                 font-weight: bold;
                 color: red;
                 content: "日间";
             }
 
             /* 以下就是夜间模式的一些设定 */
             @media (prefers-color-scheme: dark) {
                 #icon {
                     background-color: rgb(63, 127, 170);
                     /* 这里就是关键代码，实现图片的颜色反转 */
                     /*  */
                     -webkit-filter: invert(1);
                     filter: invert(1);
                     /*  */
                 }
                 /* 为了方便直观，这里再添加一个文字显示 */
                 #mode::before {
                     font-weight: bold;
                     color: red;
                     content: "夜间";
                 }
             }
         </style>
     </head>
     <body>
         <b>当前昼夜模式：<span id="mode"></span></b>
         <br>
         <img id="icon" alt="图标" src="icon.png" />
     </body>
 </html>

运行效果很直观：

并且这样有一个特别方便的特点是，改变是实时的，一旦昼夜模式切换，这个颜色也是立马就变化。

那么很明显发现一个问题是夜间模式下图片背景也变了，这个其实没什么影响，毕竟本来就是透明图片，这里是因为设置了img标签的background才有了这样的情况。

这里在查资料的时候还找到改变颜色的相关的文章：

CSS 随意更改img或者background的图片颜色img改变颜色有玉微凉，是为樱琅的博客-CSDN博客，这篇大致是利用阴影颜色？实际尝试，在自己的三个设备上只有电脑有效果。
两行 CSS 代码实现图片任意颜色赋色技术 - ChokCoco - 博客园 (cnblogs.com)，这篇文章也是说明了适用情况是有背景的时候，并不适合我，但也是一种思路。

稍微改了一下代码，最终效果就是如下：

xml 复制代码

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>自动变色</title>
         <style>
             /* 
             这里可以当作图标在日间模式下的一些参数设定
             比如这里设置个背景颜色让图片明显一点
             */
             body {
                 background-color: #fff;
             }
             /* 为了方便直观，这里再添加一个文字显示 */
             #mode::before {
                 font-weight: bold;
                 color: red;
                 content: "日间";
             }
 
             /* 以下就是夜间模式的一些设定 */
             @media (prefers-color-scheme: dark) {
                 b {
                     color: #fff;
                 }
                 body {
                     background-color: #000;
                 }
                 #icon {
                     /* 这里就是关键代码，实现图片的颜色反转 */
                     /*  */
                     -webkit-filter: invert(1);
                     filter: invert(1);
                     /*  */
                 }
                 /* 为了方便直观，这里再添加一个文字显示 */
                 #mode::before {
                     font-weight: bold;
                     color: red;
                     content: "夜间";
                 }
             }
         </style>
     </head>
     <body>
         <b>当前昼夜模式：<span id="mode"></span></b>
         <br>
         <img id="icon" alt="图标" src="icon.png" />
     </body>
 </html>

可以说是非常的满意了，文章到此结束，类似也可以实现很多有趣的功能了，图片截的有点潦草，问题不大，谢谢看完。

笔记记录参考：