首先简单的思路就是给主题样式表适配写一套黑色模板的css，主要是背景，图片和文字等适配。css是最复杂工程量最大的。
然后使用js控制切换，当切换至暗黑模式后class 调用适配暗黑的css，由于css层级优先关系就达到了暗黑的效果。
首先加入js代码：
你可以扔footer页脚，或创建js文件
<script type="text/javascript">
//夜间模式www.pkak.cn
(function(){
if(document.cookie.replace(/(?:(?:^|.*;s*)nights*=s*([^;]*).*$)|^.*$/, "$1") === ''){
if(new Date().getHours() > 22 || new Date().getHours() < 6){
document.body.classList.add('night');
document.cookie = "night=1;path=/";
console.log('夜间模式开启');
}else{
document.body.classList.remove('night');
document.cookie = "night=0;path=/";
console.log('夜间模式关闭');
}
}else{
var night = document.cookie.replace(/(?:(?:^|.*;s*)nights*=s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.remove('night');
}else if(night == '1'){
document.body.classList.add('night');
}
}
})();
//夜间模式切换
function switchNightMode(){
var night = document.cookie.replace(/(?:(?:^|.*;s*)nights*=s*([^;]*).*$)|^.*$/, "$1") || '0';
if(night == '0'){
document.body.classList.add('night');
document.cookie = "night=1;path=/"
console.log('夜间模式开启');
}else{
document.body.classList.remove('night');
document.cookie = "night=0;path=/"
console.log('夜间模式关闭');
}
}
</script>
其次在header页头的body加入php判断
检测到cookie相关字段直接输出body class为night，防止页面闪烁。
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
最后，调试CSS，body.night xxx ，xxx覆盖替换的css样式，body.night img 是把图片降低亮度，有些地方图片如果没有降低亮度，那么也像前面那样加入。
body.night xxx{
background-color: #263238;
color: #aaa;
}
body.night img {
filter: brightness(30%);
}
因为本站使用了div全局所以过滤了body我的css修改例子，看一下应该就懂了。
<style>
.night #ceotheme{
background: #111;
}
.night .nex_focuson_middle {
border-bottom: 1px solid #111111;
}
.night .nex_focuson_Lsd {
border-right: 1px solid #111111;
}
.night .searchWrapper.extend .searchBox {
background: #111111;
}
.night .ceo-night-an {
color: #fff !important;
}
.night .ceo-zhuanti-item a{
background-color: #151617;
}
.night .ceo-zhuanti-item h2{
color: #fff;
}
.night .link {
border: 1px dashed #313131;
}
.night .ceo-zhuanti-item .ceo-zhuanti-item-thumb:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 20px;
background-image: -webkit-linear-gradient(top, rgba(117, 117, 117, 0.7) 0, #151617 100%);
background-image: -o-linear-gradient(top, rgba(117, 117, 117, 0.7) 0, #151617 100%);
background-image: linear-gradient(to bottom, rgba(117, 117, 117, 0.7) 0, #151617 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#ffffffff', GradientType=0);
z-index: 10;
}
.night .ceo-single-weizhi{
background-color: #151617;
border: 1px solid #222;
border-radius: 4px!important;
}
.night .ceo-fl-icon a{
background-color: #151617;
border: 1px solid #222;
}
.night .b-a {
border: 1px solid #111111!important;
}
.night .b-b {
border-bottom: 1px solid #111111!important;
}
.night .b-t {
border-top: 1px solid #111111!important;
}
.night a, .ceo-link {
color: #fff;
}
.night .navbar {
background: #1d1f20;
}
.night .nav>ul>li>a {
color: #fff;
}
.night .nav>ul>li .sub-menu li a:hover {
color: var(--primary-color);
}
.night .nav>ul>li .sub-menu {
background: #262626;
border-top: 1px solid #262626;
}
.night .nav>ul>li .sub-menu li a {
background: #1d1f20;
color: #fff;
}
.night .header-info i {
color: #fff;
}
.night .user-info {
background: #151617;
}
</style>
OK，只要客户端时间是22点到6点之间，就自动切换到夜间模式，你也可以用下面的代码来弄一个按钮在页面上，方便随时切换。
<a href="javascript:switchNightMode()" rel="external nofollow" class="wpkf" ceo-tooltip="开启/关闭夜间模式"><i class="iconfont icon-nightmode"></i></a>
评论