WordPress教程 · WPtech

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

小编 · 4月25日 · 2020年 ·

之前就有想法给主题适配一个色彩模式，但就于目前大家的色彩模式体验都不是很好。就一直被搁浅了。今天给新站移植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()" 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>
相关文章

Fastclick 解决移动端click事件延迟300ms和点击穿透问题

2月23日 · 2021年

【908个】iFonts所有字体打包下载

11月22日 · 2020年

微软Win10开始菜单大变，即将支持彩虹效果

8月22日 · 2020年

WordPress文章内页新增彩色渐变框

6月29日 · 2020年
0 条回应

必须 注册 为本站用户， 登录 后才可以发表评论！

    2019-2024 | 字节智造 All Rights Reserved 网站地图