看到很多网站有日间模式和夜间模式的切换,于是本站也尝试做了一个。博主不懂网站制作,所以只能到处剽窃,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