WordPress教程 · WPtech

网站开发色彩模式思路及核心代码

•̀.̫•́✧ · 4月25日 · 2020年 · 本文15222字 · 阅读39分钟194

之前就有想法给主题适配一个色彩模式,但就于目前大家的色彩模式体验都不是很好。就一直被搁浅了。今天给新站移植RIPRO的时候,发现色彩模式还蛮好玩的,开搞!

网上关于WordPress色彩模式的文章好像也不少,大多是基于Darkmode.js的:GItHub:https://github.com/sandoche/Darkmode.js,有插件类型的,也有代码适配的。(插件我都已经汉化过了,发现并不好用,遂放弃)

思路

  • 首先简单的思路就是给主题样式表适配写一套黑色模板的css,主要是背景,图片和文字等适配。css是最复杂工程量最大的。日主题的色彩模式css我写了一下午(第一次写都有写注释)
  • 然后使用js控制切换,当切换至色彩模式后class 调用适配暗黑的css,由于css层级优先关系就达到了暗黑的效果。
  • 下面教程开始,教程部分引入自: 郑永博客  我会在教程下边记一下后台适配开关及遇到的问题解决方法。
网站开发色彩模式思路及核心代码-歪?是3.1415926吗

JavaScript代码

首先加入js代码,你可以扔footer页脚:

<script type="text/javascript">
    //夜间模式
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\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*)night\s*\=\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*)night\s*\=\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>

cookie判断

其次在header页头的body加入php判断,检测到cookie相关字段直接输出body class为night,防止页面闪烁。

<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">

css样式编写

最后,调试CSS,body.night xxx ,xxx覆盖替换的css样式,body.night img 是把图片降低亮度,有些地方图片如果没有降低亮度,那么也像前面那样加入。

body.night xxx{
    background-color: #263238;
    color: #aaa;
}
body.night img {
    filter: brightness(30%);
}

css示例

我的css修改例子,看一下应该就懂了。

<style>
body.night, body.night #body, body.night .page_navi a.current {
    background-color: #263238!important;
    color: #888282!important;
}
body.night #sidebar, body.night .next-page a {
    background-color: #263238;
    color: #888282;
}
body.night #content .post p a, body.night .floor {
    color: #af8f77;
}
body.night .shang {
    color: #263238;
}
body.night .shang {
    background-color: #ab9a6d;
}
body.night img, body.night .icon_qq, body.night .icon_facebook, body.night .icon_rss, body.night .icon_weixin, body.night .icon_github, body.night .bozhugravatar a, body.night .left-col {
    filter: brightness(50%);
}
body.night a, body.night a:link, body.night a:visited {
    color: #989292;
}
body.night #comments form textarea, body.night #comments form input {
    background-color: #263238;
    color: #888282;
}
body.night #content .menufeng {
    border-bottom: 1px solid #989292;
}
body.night #footer, body.night #xgwz, body.night #comments {
    border-top: 1px solid #989292;
}
body.night #comments form textarea, body.night #comments form input, body.night #shangerweima {
    border: 1px solid #989292;
}
body.night #nav .menu ul{
    background: #3e4c52;
}
</style>

触发事件

OK,只要客户端时间是22点到6点之间,就自动切换到夜间模式,你也可以用下面的代码来弄一个按钮在页面上,方便随时切换。

<a href="javascript:switchNightMode()" rel="nofollow noopener"  target="_self">查看效果</a>

OK,结束,前面简单,后面css部分比较费时一些,如果你的主题够简单,那也很快,不然的话就得考验你耐心了。

到这里基本就能实现色彩模式了,这个方法不只适用于WordPress,适用于几乎所有网站。

本站色彩模式适配代码

您暂时无权查看此隐藏内容!

内容查看价格1立即支付
在本站充值消费一律不支持退款,请理性选择!如果支付后等待五秒网页没有刷新,请及时联系客服QQ:2440929818,一定为您解决。
0 条回应