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

记录背景

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

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

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

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

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

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

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

icon

编写代码

<!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)，这篇文章也是说明了适用情况是有背景的时候，并不适合我，但也是一种思路。

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

<!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>