nirvana主题夜间模式按钮添加修改【作者将在9/1日更新官方版夜间模式】

释放双眼,带上耳机,听听看~!

nirvana主题没有夜间模式,思前想后在网上各种找教程,还真有个大神发了个教程,还是支持根据服务器时间自动变换的,拿来一顿学习最终改成了四不像,现在网站用的这个

[need_reply]

首先添加以下代码到footer.php文件最后</body>前面即可。

<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>

 

然后添加以下代码到header.php文件的</header>下面,


PS:css样式应该可以单独制作一个css文件,然后引入下就行了,但我没做也没尝试,因为我不会,估计很简单,因为我脑子里大概知道怎么做?。


<!--夜间模式star-->
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
<!--夜间模式end-->
<!--css样式star-->
<style>
body.night #footer,body.night #wrapper,body.night.main-nav.flat{border-top:1px solid #262e3a;background:#1c2633;box-shadow:0 1px #1c2633 inset}
body.night .vcard .meta{border-bottom:1px solid #1c2633}
body.night.topNav[pandaTab]>.menu>li>a{color:#f8f8f8}
body.night.post_nav>.nav>li a{color:#f8f8f8}
body.night .post_nav>.nav>li a{background:#131c24}
body.night .panda_pagi[pandaTab] .anchor{background:linear-gradient(#2e97c7,#1c2633)}
body.night .panda_pagi[pandaTab]>.menu{background:#131c24;box-shadow:0 1px 12px 0 #337ab7,0 5px 10px rgba(31,45,61,.15) inset}
body.night .post_nav>.nav>li.active a{background:#0c3554;box-shadow:0 13px 15px #1c2633}
body.night h2.widgettitle{border-bottom:1px solid #262e3a;box-shadow:0 1px #262e3a}
body.night .postLists.cards .card .meta{background:#283749}
body.night .long-model-wrapper>.long-model:nth-child(odd){background:#1c2633}
body.night .main-nav.flat{box-shadow:0 1px #656667,0 0 transparent,0 2px #000}
body.night .long-model{border-top:1px solid #616263;box-shadow:0 1px 0 rgba(10,10,10,.5) inset}
body.night #comments,body.night .article_wrapper.post,body.night .article_wrapper.post .share-modal,body.night .relate-posts{border-top:1px solid #1c2633;background:#272e3a}
body.night .post-model:after{background:#34415a}
body.night .popover-title{background:#1f2935}
body.night .popover{background-color:#171c22}
body.night .long-model .more{background:linear-gradient(#1c2633,#1c2633);box-shadow:0 5px 5px #010101,0 0 4px 20px #1c2633 inset,0 -1px 2px #1c2633 inset}
body.night .long-model-wrapper .long-model:nth-child(odd) .postLists.lists .card .tags:after,body.night .long-model-wrapper .long-model:nth-child(odd) .postLists.lists .card .tags:before{background:linear-gradient(90deg,#1c2633,#1c2633)}
body.night .postLists.cards .card .date:after{background:linear-gradient(90deg,#283749,#283749)}
body.night .postLists.cards .card .tags:after,body.night .postLists.cards .card .tags:before{background:linear-gradient(90deg,#283749,#283749)}
body.night #baiduAudioPlayer{background:#34415a;box-shadow:1px 2px 5px #10181d}
body.night .comment-input{border:1px solid #424446;background:#171c23;color:#999}
body.night .sidebarMenu[pandaTab] .anchor{background:linear-gradient(#2e97c7,#1c2633);box-shadow:0 6px 6px #131d25,0 0 0 #131c23,0 0 2px #34415a inset}
body.night .sidebarMenu[pandaTab]>.menu{background:#131c24;box-shadow:0 1px 12px 0 #337ab7,0 5px 10px rgba(31,45,61,.15) inset}
body.night .main-nav.flat,body.night .main-nav.float{background:#141c25}
body.night .display-switcher[pandaTab] .anchor{background:#131c23;box-shadow:0 8px 13px #131c23 inset,0 1px #131c23}
body.night .postLists.lists .card .tags:after,body.night .postLists.lists .card .tags:before{background:#1c2633}
body.night .article_wrapper.post,body.night .postLists.cards .card h2{color:#d9d8d9}
body.night .pf_tag_cloud>.navigator>li:nth-child(even) a,body.night .submit-comment{background:#434446;box-shadow:0 3px 5px #191717}
body.night .toggle_sidebar{background:#434446}
body.night .pf_tag_cloud>.navigator>li a{background:#34425a;color:#f9f9fa}
body.night .pf_tag_cloud>.navigator>li a:before{border-right:15.5px solid #939292}
body.night.pf_tag_cloud>.navigator>li:nth-child(even) a:before{border-right-color:#939292}
body.night .floatTools .tool-button{background:#424446;box-shadow:0 2px 2px rgba(31,45,62,.1),0 0 0 1px #191717 inset;color:#dcdbdb;text-shadow:0 1px #191717}
body.night .sidebarMenu[pandaTab]>.menu>li>a{color:#b4b4b5;text-shadow:0 1px #424446}
/*手机版右上角按钮*/
.nights{float:right;overflow:hidden;width:90px;text-align:center;cursor:pointer;transition:.25s}.nights a{color:#99a9bf}.nightss{float:right;overflow:hidden;width:32px;text-align:center;cursor:pointer;transition:.25s}
</style>
<!--css样式end-->


正常情况下已经结束了,上面的代码是晚上22点到第二天早上6点是深色模式的,请注意:如果你增加了主动切换深色夜间模式按钮的话,如果用户点击了,那么这个自动切换则被禁用,直到用户清除了浏览器缓存cookie,才会再次执行自动切换命令,用户主动切换的优先权排第一。



找到assets/template/nav-main.php文件打开。


1⃣️:在


<div class="normal_searchBtn" data-toggle="tooltip" data-placement="auto bottom" title="" @click="this.show_global_search()" data-original-title=""><i class="fas fa-search"></i></div>


的后面添加以下代码:


   <div class="login_Btn"><a href="javascript:switchNightMode()" target="_self"><i class="normal_searchBtn fas fa-lightbulb" aria-hidden="true"></i></a></div>


2⃣️:在


<div class="mobileNavMenuBtn visible-xs visible-sm"><div class="menuIcon" @click="this.toggle_mobile_menu()"><div class="bread bread1"></div><div class="bread bread2"></div><div class="bread bread3"></div></div>


的后面添加以下代码:


<div class="nights sidebar"><a href="javascript:switchNightMode()" target="_self"><i class="fas fa-lightbulb"></i></a></div>


至此整个过程结束,我看还有人是在右下角返回顶部按钮的下面添加的深色模式切换,那么可以在footer文件里添加执行按钮即可。

[/need_reply]

至此整个过程结束,我看还有人是在右下角返回顶部按钮的下面添加的深色模式切换,那么可以在footer文件里添加执行按钮即可。

 

WordPress

循环获取指定文分类的文章列表

2020-3-27 0:20:53

WordPress

wordpress美化-7B2主题添加菜单角标

2020-8-1 20:10:14

2 条回复 A文章作者 M管理员
  1. 该内容被隐藏了,回复评论和支付都可以获得一样都内容,回复评论需要通过审核才可以看到,支付无需审核直接查看。

  2. odmin

    666

个人中心
今日签到
搜索