给nirvana主题加个深色夜间模式

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

使用教程


用的是以下这个教程



按照步骤搞就行了,就是修改css样式的颜色需要一点点试,最终搞成了我这个样子的,如果你也想按照我这个搞的话可以复制我这个css样式,自己修改总结下,我是新手搞得很臃肿,期待你能拿回去改的完美再发给我一份?。


还有很多不完美的地方慢慢折腾吧,毕竟这个博客都是兴趣建立的?,如果你是冲着缩略图的美女进来的,请访问这里?



css代码(4/4更新)


[need_reply]

<!--夜间模式-->
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
<!--夜间模式-->
<!--夜间模式css-->
<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。将以下代码放在/niRvana/assets/template的nav.main.php的这个代码前面


1.找到这个代码,然后在它前面添加第二个代码
<div class="sidebar" @click="this.toggle_mobile_sidebar()"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path id="sidebar" data-name="sidebar" class="cls-1" d="M19,20H3a3,3,0,0,1-3-3V5A3,3,0,0,1,3,2H19a3,3,0,0,1,3,3V17A3,3,0,0,1,19,20ZM13,3H3A2,2,0,0,0,1,5V17a2,2,0,0,0,2,2H13V3Zm8,2a2,2,0,0,0-2-2H14V19h5a2,2,0,0,0,2-2V5Zm-6,7h5v1H15V12Zm0-3h5v1H15V9Zm0-3h5V7H15V6Z"/></svg></div></div></div></div></div>


2.将这个代码添加到上面这个代码的前面
<div class="nights sidebar"><a href="javascript:switchNightMode()" target="_self"><svg class="icon" aria-hidden="true"><use xlink:href="#zmslack"></use></svg></a></div>


[tip type="tip worning" ]

请注意手机版按钮提示用的是阿里图标,你需要将它改成自己的请自行替换,电脑的我不会加,加了好几次都没能完美的加在搜索按钮旁边,但它也是在/niRvana/assets/template的nav.main.php这个php里添加的。可以自行试试

[/tip]

[/need_reply]


预览图


WordPress

WordPress部署H5播放器,支持m3u8/MP4/WebM和Ogg格式

2020-3-13 15:45:12

WordPress

看惯了单色FontAwesome图标,来享受彩色的吧!

2020-3-17 21:12:27

8 条回复 A文章作者 M管理员
  1. 测试测试

  2. 可以可以

  3. 测试啊

  4. 这个黑夜模式是否能教我一下呢?

    • 我是将代码按照提示直接放在php文件里的(如footer.php和header.php),然后就行了,你自己会这方面技术的话,可以放在合适的位置去引用,毕竟直接放在php里到时候更新主题比较麻烦

  5. 请注意,该夜间模式会根据时间(自己可改动)自动切换日/夜模式,但若访问者主动点击了切换日夜模式按钮则具有最高优先权,直到用户或网站刷新了缓存和cookie才会继续自动切换。这个代码的出处是张勇博客,可以去咨询原作者

  6. 看看

  7. odmin

    666

个人中心
今日签到
搜索