本文参考了 https://qqdie.com/archives/night-mode-of-website.html 非常感谢!

怎么实现?

为站点添加一个访问时不先不加载的css,待夜间模式启动,便加载css,这个css便是修改站点颜色的部分了。

<link href="dark.css" rel="alternate stylesheet" type="text/css" title="dark">
当你写好了你的夜间模式css,在你的页面最低端添加这条引用即可。

  • 为什么要放在底部?
    css也有先来后到的顺序,如果放在最前,就会被后加载css覆盖。虽然可以加上!important解决,但是每条都加上太繁琐了,而且可能会有其他隐藏问题。

有title熟悉rel属性值同时包含alternate stylesheet的<link>将作为备选样式CSS文件加载,默认不渲染。

怎么写?

大概分为 字体颜色 背景颜色 其他元素颜色 几个部分
比如全局字体替换你就可以这么写

.navbar-default .navbar-brand,.navbar-default .navbar-nav>li>a,.Dropdown-menu>li>a,.dropdown-menu>li>a, .Dropdown-menu>li>button, .Dropdown-menu>li>span,.DiscussionListItem-title,textarea.form-control,.navbar-default .navbar-form .input-group-btn .btn,.form-control,.comment-author,.p-name, a.p-name,span.comment-reply a, span.cancel-comment-reply a,.comment-list p, .close,.index-box .index-item, .index-box .index-link,.tagspan a, .tagspan a:hover, .tagspan a:focus,.login .box .form input[type="text"], .login .box .form input[type="password"],.navbar-default .navbar-toggle:before,.protected .submit{
color: rgba(255,255,255,0.9);

这里用的是参考文章里头学习来的(才没有CV
右键、审查元素 你页面每一个需要修改的地方
然后将他复制到 dark.css 里头,修改相应的color即可。
如果你没有任何css基础,这份工作可能对你来说不那么容易。

怎么启用?

function switchNightMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.querySelector('link[title="dark"]').disabled = true;
        document.querySelector('link[title="dark"]').disabled = false;
        document.cookie = "night=1;path=/"
        console.log('夜间模式开启');
    }else{
        document.querySelector('link[title="dark"]').disabled = true;
        document.cookie = "night=0;path=/"
        console.log('夜间模式关闭');
    }
}

将这一段js应用到你的页面之中,你可以看到,使用switchNightMode()即可切换夜间模式。
有了这个函数你就可以自定义他的使用场景了~

还有,定时切换,以及正在赶来的系统级夜间模式的检测自动切换。

用上之前的cookie

加了一个cookie是用来存储用户是否开启夜间模式的
你只需要在引用dark.css的地方,修改 alternate
<?php if($_COOKIE['night'] != '1'){echo 'alternate ';} ?>即可在页面加载时就判断了。

:cherry_blossom:撒花

虽然看见过有人提出用css3的反色即可快速实现,但怎么会有手工调的好(迫真)
调整出你自己觉得最舒服的黑暗模式吧!