WordPress教程 · WPtech

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

•̀.̫•́✧ · 4月25日 · 2020年 · 本文15199字 · 阅读38分钟560

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

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

思路

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

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,适用于几乎所有网站。

本站色彩模式适配代码

Css代码

以下代码写入到主题app.min.css文件中。

body.night .main-nav.flat {
background-color: #263238;
color:#738192;
-webkit-box-shadow: 0 1px #334148, 0 0 #334148, 0 2px rgb(51, 65, 72);
box-shadow: 0 1px #324047, 0 0 transparent, 0 2px rgb(51, 65, 72);
}
body.night #footer {
background-color: #263238;
color:#738192;
}
body.night #wrapper {
background-image:none;
}
body.night .main-nav.float {
background-color: #263238;
color:#738192;
}
body.night #wrapper {
background-color: #263238;
}
body.night #comment {
background-color: #334148;
color:#738192;
}
body.night .article_wrapper.post {
background-color: #334148;
color:#738192;
}
body.night #comments {
background-color: #334148;
color:#738192;
}
body.night .toggle_sidebar {
background-color: #263238;
color:#738192;
}
body.night .pdmsg_modal{
background-color: #263238;
color:#738192;
}
body.night .pdmsg_modal.prompt .prompt_input_wrapper .input {
background-color: #263238;
color:#738192;
}
body.night .pf_tag_cloud>.tag>li>a {
background-color: #263238;
}
body.night .pf_tag_cloud>.link>li a {
text-shadow: 0 1px #fff0;
}
body.night .pf_microblog>ul .main {
background-color: #263238;
background:-webkit-linear-gradient(bottom,rgba(255, 255, 255, 0),rgba(255,255,255,0) 10px) #ffffff00;
color:#738192;
border:1px solid #ffffff00;
box-shadow:0 0 0 1px rgb(51, 65, 72) inset, 0 13px 15px rgba(31,45,61,.15);
}
body.night .pf_microblog>ul .main * {
text-shadow:0 1px rgba(243, 243, 243, 0);
color: #616f7d;
}
body.night .pf_microblog>ul .main:before {
display: block;
position: absolute;
left: 4px;
top: 0;
right: 4px;
height: 20px;
border-radius: 10px;
background:rgba(255, 255, 255, 0);
}
body.night .pf_tag_cloud>.navigator>li a {
background-color: #263238;
color: #616f7d;
-webkit-box-shadow:0 13px 15px rgba(0,0,0,.1);
}
body.night .pf_tag_cloud>.navigator>li:nth-child(even) a {
background-color: #263238;
color:#738192;
background:-webkit-linear-gradient(350deg,#ffffff00,#ffffff00);
-webkit-box-shadow:0 13px 15px rgba(0,0,0,.1);
}
body.night .pf_tag_cloud>.navigator>li a:before {
border-right:15.5px solid #263238;
}
body.night .submit-comment {
background:#334148;
box-shadow:0px 0px 1px rgb(255, 255, 255);
color: #99a9bf;
}
body.night .postLists .readMore {
background: linear-gradient(90deg,rgba(254, 254, 255, 0),rgba(253, 253, 253, 0.08),rgba(202,209,219,0)) 0 0/100% 1px no-repeat,linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0)) 0 1px/100% 1px no-repeat,radial-gradient(ellipse 50% 50% at 50% 0,rgba(247, 247, 247, 0.05),rgba(202,209,219,0)) 0 2px no-repeat;
}
body.night .postLists .readMore:before {
background: radial-gradient(ellipse 50% 50% at 50% bottom,rgba(247, 247, 247, 0),rgba(255, 255, 255, 0));
}
body.night .article_wrapper.post .share-modal {
background:#334148;
border-top:1px solid #334148;
}
body.night .relate-posts {
background:#334148;
}
body.night article .title_style_01:after {
background:#334148;
}
body.night .post-model:after {
background:#334148;
}
body.night .comment-input {
border:1px solid #757d82;
}
body.night #comments .form-meta>a {
border:1px solid #757d82;
}
body.night .pdmsg_buttons button:last-child {
color:#8492a6;
}
body.night .pdmsg_title {
color:#8492a6;
}
body.night .pdmsg_modal.prompt .prompt_input_wrapper .input {
border:1px solid #757d82;
}
body.night #baiduAudioPlayer {
background:linear-gradient(90deg,#263238,#263238 8%,#263238);
box-shadow:2px 4px 8px rgb(38, 50, 56);
}
body.night .comment-reply-link {
background: #334148;
border: 1px solid #334148;
box-shadow: 0 4px 6px rgb(38, 50, 56), 0 0 0 1px #99a9bf inset;
}
body.night .vcard .meta {
border-bottom:1px solid #334148;
}
body.night .floatTools .tool-button {
background:-webkit-gradient(linear,left top,left bottom,from(#334148),to(#334148));
text-shadow:0 1px rgb(51, 65, 72);
box-shadow:0 0px 0px rgb(51, 65, 72), 0 0 0 0px #334148 inset;
}
body.night body html {
background:#263238;
}
body.night .favlink-card {
box-shadow:0 5px 5px rgb(38, 50, 56), 1px 0 0 #263238 inset, -1px 0 0 #334148 inset, 0 -1px 0 #263238 inset, 0 0 0 2px rgb(38, 50, 56) inset;
background:linear-gradient(#263238,#263238 88%,#263238);
}
body.night .favlink-card .title {
text-shadow:0 1px #ffffff00;
}
body.night .favlink-card .description {
text-shadow:0 1px #fff0;
}
body.night .post_nav>.nav>li a {
background:#263238;
}
body.night .post_nav>.nav>li a::before {
border-right:14.5px solid #263238;
}
body.night .post_nav>.nav {
border-left:1px solid #334148;
box-shadow:1px 0 rgb(51, 65, 72) inset;
}
body.night .post_nav>.nav>li a::after {
box-shadow: 0 0 0 1px #334148 inset, 0 0 0 2px #99a9bf inset;
box-shadow: 0 0 0 1px #263238 inset, 0 0 0 2px #99a9bf inset;
background: #334148;
}
body.night .postLists .readMore a {
background: linear-gradient(#6f777b,#50595e 23%,#334148 50%,#263238);
box-shadow: 0 -1px rgb(121, 128, 132) inset, 1px 0 rgb(113, 121, 125) inset, -1px 0 rgb(118, 126, 129) inset, 0 3px 5px rgb(54, 65, 71);
border: 1px solid #334148;
color: #8492a6;
}
body.night .postLists.lists .card .tags:after, .postLists.lists .card .tags:before {
background:linear-gradient(90deg,rgb(38, 50, 56),#263238);
}
body.night .postLists.cards .card .meta {
background:linear-gradient(90deg,#334148,#334148);
}
body.night .postLists.cards .card h2 {
color: #8492a6;
}
body.night .postLists.cards .card .date:after {
background: linear-gradient(90deg,rgba(255, 255, 255, 0),#fff0);
}
body.night .postLists.cards .card .tags:after, .postLists.cards .card .tags:before {
background: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(#fff0));
background: -webkit-linear-gradient(left,rgba(255,255,255,0),#fff0);
background: linear-gradient(90deg,rgba(255,255,255,0),#fff0);
}
body.night #assistance {
background: #334148;
background: -webkit-gradient(linear,left top,left bottom,from(#334148),to(#334148));
background: -webkit-linear-gradient(#334148,#334148);
background: linear-gradient(#334148,#334148);
box-shadow: 0 15px 20px rgba(51, 65, 72, 0), 0 0 0 2px rgb(51, 65, 72), 0 0 0 1px #324047 inset;
}
body.night .chatList.server .chat_pop {
background:#334148;
color: #738192;
border: 1px solid #616f7d;
}
body.night .chat_form .chat_input {
text-shadow: 0 1px #ffffff00;
border-radius: 5px;
border: 1px solid #334148;
background: -webkit-gradient(linear,left top,left bottom,from(#334148),to(#334148));
background: -webkit-linear-gradient(#334148,#334148);
background: linear-gradient(#324047,#334148);
-webkit-box-shadow: 0 1px #fff, 0 2px 2px rgba(31,45,61,.06) inset;
box-shadow:0 1px #334148, 0 2px 2px rgba(31, 45, 61, 0) inset;
}
body.night .chat_form {
border-top: 1px solid #7f8da1;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0 1px #7f8da1 inset, 0 -1px rgba(255, 255, 255, 0) inset, 0 -2px 1px rgba(31, 45, 61, 0);
box-shadow: 0 1px #7f8da1 inset, 0 -1px rgba(255, 255, 255, 0) inset, 0 -2px 1px rgba(31, 45, 61, 0);
background: -webkit-gradient(linear,left top,left bottom,from(#7f8da1),to(#7f8da1));
background: -webkit-linear-gradient(#7f8da1,#7f8da1);
background: linear-gradient(#7f8da1,#7f8da1);
}
body.night .sidebar-visible .mobile_sidebar {
-webkit-box-shadow:1px 0 rgb(38, 50, 56) inset;
box-shadow: 1px 0 rgb(38, 50, 56) inset;
}
body.night h2.widgettitle {
border-bottom: 1px solid #263238;
box-shadow: 0 1px rgb(38, 50, 56);
}
body.night .sidebarMenu[pandaTab] .anchor {
background: linear-gradient(#334148,#334148);
-webkit-box-shadow: 0 6px 6px rgba(38, 50, 56, 0.36), 0 10px 10px rgba(51, 65, 72, 0), 0 -1px 2px rgb(38, 50, 56) inset;
box-shadow:0 6px 6px rgba(38, 50, 56, 0), 0 10px 10px rgba(51, 65, 72, 0), 0 -1px 2px rgba(51, 65, 72, 0) inset
}
body.night .sidebarMenu[pandaTab]>.menu {
background: #263238;
-webkit-box-shadow: 0 1px rgba(255,255,255,.5), 0 8px 13px rgba(0,0,0,.15) inset;
box-shadow: 0 1px rgb(51, 65, 72), 0 8px 13px rgb(50, 64, 71) inset;
}
body.night .sidebarMenu[pandaTab]>.menu>li.active>a {
color: #99a9bf;
}
body.night .display-switcher[pandaTab] .anchor {
background: #334148;
-webkit-box-shadow: 0 8px 13px rgb(51, 65, 72) inset, 0 1px rgb(51, 65, 72);
box-shadow: 0 8px 13px rgba(31,45,61,.13) inset, 0 1px rgb(51, 65, 72);
}
body.night .categoryNav[pandaTab]>.menu>li.active>a {
color: #99a9bf;
background: #334148;
box-shadow:0 8px 10px rgba(51, 65, 72, 0);
}
body.night .pf_microblog>ul {
border-left: 1px solid #334148;
-webkit-box-shadow: 1px 0 rgb(51, 65, 72) inset;
box-shadow: 1px 0 rgb(51, 65, 72) inse;
}
body.night .pf_microblog>ul>li:before {
background: #99a9bf;
box-shadow: 0 0 0 1px #334148 inset, 0 0 0 2px #334148 inset;
}
body.night .pf_tag_cloud>.navigator {
border-left: 1px solid #324047;
-webkit-box-shadow:1px 0 rgb(51, 65, 72) inset;
box-shadow:1px 0 rgb(51, 65, 72) inset;
}
body.night .pf_tag_cloud>.navigator>li a:after {
background: #99a9bf;
-webkit-box-shadow: 0 0 0 1px #334148 inset, 0 0 0 2px #334148 inset;
box-shadow: 0 0 0 1px #334148 inset, 0 0 0 2px #324047 inset;
}
body.night .pf_microblog>ul .main:after {
border-top: 6px solid #96999a00;
border-right: 6px solid #334148;
border-bottom: 6px solid #33414800;
}
body.night .pf_microblog>ul .date:before {
border-right: 6px solid #334148;
}
body.night .pf_microblog>ul .date:after {
border-right: 6px solid #334148;
}
body.night a[href] {
color: #6e7c8c;
}
body.night .vcard .date {
color: #99a9bf;
}
body.night .fullscreen_search .searchbox .button {
background: #334148;
color: #99a9bf;
}
body.night .chatList.server .chat_pop:before {
border-right: 5px solid #334148;
}
body.night body.night .chat_form {
border-top: 1px solid #616f7d;
background: linear-gradient(#616f7d,#616f7d);
}
body.night .panda_pagi[pandaTab]>.menu {
background: #334148;
-webkit-box-shadow: 0 1px rgb(51, 65, 72), 0 5px 10px rgb(51, 65, 72) inset;
box-shadow: 0 1px rgb(51, 65, 72), 0 5px 10px rgb(51, 65, 72) inset;
}
body.night .panda_pagi[pandaTab] .anchor {
background: linear-gradient(#263238,#263238);
-webkit-box-shadow: 0 6px 6px rgba(31,45,61,.05), 0 10px 10px rgba(31, 45, 61, 0), 0 -1px 2px rgba(255, 255, 255, 0) inset;
box-shadow: 0 6px 6px rgba(38, 50, 56, 0), 0 10px 10px rgba(51, 65, 72, 0), 0 -1px 2px rgba(50, 64, 71, 0) inset;
}
body.night .panda_pagi[pandaTab]>.menu>li>a {
color: #8b9bb0;
text-shadow: 0 1px rgba(139, 155, 176, 0);
}
body.night .pf_tag_cloud>.tag>li:hover>a {
color: #fff;
background: #20a0ff;
}
body.night .fullscreen_search .advanced {
color: #99a9bf;
}
body.night .fullscreen_search .checkbox-group {
color: #99a9bf;
}
body.night .fullscreen_search .searchbox:focus-within .button {
-webkit-box-shadow: 0 3px 4px rgba(32, 160, 255, 0.01);
box-shadow: 0 3px 4px rgba(32, 160, 255, 0);
}
body.night .fullscreen_search .searchbox:focus-within {
background: #fdfdfd40;
color: #475669;
}
body.night .long-model-wrapper+#footer {
border-top: 1px solid #334148;
-webkit-box-shadow: 0 1px 0 rgb(51, 65, 72) inset, 0 1px 0 rgb(51, 65, 72);
box-shadow: 0 1px 0 rgb(51, 65, 72) inset, 0 1px 0 rgb(51, 65, 72);
}
body.night .modal-content {
background: #263238;
}
body.night .modal-footer {
background: #263238;
border-top: 1px solid #7b869300;
}
body.night .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
background-color: #263238;
border: 1px solid #3a4348;
}
body.night .modal-header {
border-bottom: 1px solid #e5e5e508;
color: #576571;
}
body.night .nav-tabs {
border-bottom: 1px solid #3a4348;
}
body.night .modal-body {
color: #576571;
}
body.night .btn-primary, .btn-primary:active, .btn-primary:active:focus, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary, .open>.dropdown-toggle.btn-primary:focus {
text-shadow: 0 -1px #616f7d9e;
background-color: #616f7d2b;
border-color: #616f7d00;
-webkit-box-shadow: 0 3px 5px rgba(32, 160, 255, 0);
box-shadow: 0 3px 5px rgba(32, 160, 255, 0);
color: #616f7d;
}
body.night div.popover.top.in {
background: #263238;
}
body.night .pf_user_info .meta .name {
color: #738192;
}
body.night #baiduAudioPlayer .decoration {
color: #a8adaf;
}
body.night code {
color: #bd3c5d;
background-color: #263238b8;
}
body.night article .title_style_02:before {
background: #263238;
-webkit-box-shadow: 1px 0 #263238 inset;
box-shadow: 1px 0 #263238 inset;
}
body.night article .title_style_02>* {
text-shadow: 0 1px #263238;
}

JavaScript代码

以下代码建议写入单独的JS文件中,在主题目录找到footer.php文件引入新建的JS文件。

//夜间模式
(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('夜间模式关闭');
}
}
//切换色彩模式图标
$(function(){
var secaimoshi = 0;
$("#colorSwitch").on('click',function(){
if(secaimoshi == 0){
$(".colorSwitch").attr("class","colorSwitch fas fa-moon-stars");
secaimoshi = 1;
}else{
$(".colorSwitch").attr("class","colorSwitch fas fa-sun");
secaimoshi = 0;
}
})
})

前端触发元素

以下代码写入主题footer.php文件中,自行找到位置,下列代码已经提示。

<div class="floatTools">
...
<div id="colorSwitch" onclick="switchNightMode()" data-description="色彩模式" data-placement="left" class="tool-button pandastudio_format_description"><i class="colorSwitch fas fa-sun"></i></div>
...
</div>
0 条回应