记录背景
最近挺忙，但突然又有了折腾网站的兴致。笔记网站使用的是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>
可以说是非常的满意了，文章到此结束，类似也可以实现很多有趣的功能了，图片截的有点潦草，问题不大，谢谢看完。
笔记记录参考：