肉松的站
看到很多网站有日间模式和夜间模式的切换，于是本站也尝试做了一个。博主不懂网站制作，所以只能到处剽窃，emmm...下文中的代码都是 Ctrl+C-V 来的。
功夫不负有心人，终于找了一个使用了笨方法，使用CSS将整站显示色调反转。
css代码如下：
html, img {
filter: invert(1) hue-rotate(.5turn);
}
img {
opacity: .75;
}
解释：整体将页面色调反转，将图片再次反转(负负得正)，然后给图片加一层透明度75%的蒙版，在黑色模式下，使图片暗一些，不然可能会刺眼。
在<head>中加入引用CSS文件代码
<link disabled id="dark-mode-theme" rel="stylesheet" href="dark.css">
在<header>加入切换按钮
<button id="dark-mode-toggle" style="float:right;margin-left:5px;top:5px;position:relative;line-height:30px;background:0;">◑</button>
在</body>后加入脚本代码
<script>
var toggle = document.getElementById("dark-mode-toggle");
var darkTheme = document.getElementById("dark-mode-theme");
var systemDefault = null
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
systemDefault = "dark";
} else {
systemDefault = "light";
}
var savedTheme = localStorage.getItem("dark-mode-storage") || systemDefault;
setTheme(savedTheme);
toggle.addEventListener("click", () => {
if (toggle.innerText === "◑" ) {
setTheme("dark");
} else if (toggle.innerText === "☀" ) {
setTheme("light");
}
});
function setTheme(mode) {
localStorage.setItem("dark-mode-storage", mode);
if (mode === "dark") {
darkTheme.disabled = false;
toggle.innerText = "☀";
} else if (mode === "light") {
darkTheme.disabled = true;
toggle.innerText = "◑";
}
}
</script>
完工，现在已经实现了夜间模式。
bug：1.在夜间模式下切换页面会闪过一片白，这是下一步需要思考改进的地方。（路过的大佬给一点友情指导）
2.emoji表情的色调也反被反转了，看起来有点怪。
3.手机浏览器状态栏不同步匹配黑色。
一天后更新：
1.解决切换页面会闪过一片白。有所改善，还不完善。
Initial主题有全站pjax加载方式，切换到pjax后切换页面一闪白基本消失，但使用F5刷新页面或者新开页面依旧会闪过一片白。
另外，切换到pjax后，页面顶部也多了个好看的页面加载进度条，很有高级感。但是又双叒叕遇到到新的问题：
- 页面加载进度条经常卡很久不会结束，经过F12下的多方查找，是使用的评论框特效JS文件，貌似是语法不规范导致的报错一堆，严重拖慢了页面加载。把评论框特效干掉之后页面加载进度条恢复正常。
- 统计代码报错也依旧严重，pjax不兼容站长统计，更换百度统计，F12下报错依旧很严重。
- CommentFilter评论过滤器，把我自己的评论当作机器人评论。
2.代码调整
把</body>后加入的<script>脚本代码块，打包成JS文件，单独维护和引用。
3.整体效果。
目测整体效果还不错，有些地方不是很清晰。纯文字文章和图片文章没有问题，有问题2点：①emoji表情被翻转，②转载哔哩哔哩的视频界面被翻转。鉴于本站图文文章占主流，对本文实现的夜间模式总体体验良好。
参考(剽窃)来源💕💕：
https://radu-matei.com/blog/dark-mode/.
https://www.zhangxinxu.com/wordpress/2020/11/css-mix-blend-mode-filter-dark-theme/
https://bgm.tv/group/topic/366677
本文适用于Initial主题，在2024年1月本站更换主题后已不在适用。
你只在前端处理就肯定闪动，而且一个夜间模式没有必要使用localStorage，目前主题开发的主流方案都是 Cookie 来实现夜间模式，在渲染时就可以使用PHP获取 Cookie 判断了，列如<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">。我的也会闪，不过是没法改的，因为我的不是服务端渲染哈哈，可以看看这个文章（https://xptt.com/653884.html），typecho一样能用。
感谢大佬的指导，不过我对PHP和CSS一窍不通，可能需要很长的时间去琢磨这个方法。
直接反色，在很多地方可见性是有问题的。我是根据 prefers-color-scheme 在每一处涉及颜色的，都做了两套。
对于我等小白来说这是最好的方法了。😂😂
暗色模式你的评论框已经看不清了。
感觉还行。