建站技巧

知更鸟 Begin WordPress 主题添加夜间模式

 6个月前 (06-28)     658  
文章目录

一直想给知更鸟 Begin 主题添加夜间模式、暗黑模式,得空做了一下,效果可以到右下工具栏切换查看(一个叹号图标)。其他主题也可以查看添加,修改的内容都差不多。知更鸟 Begin WordPress 主题添加夜间模式

修改的地方有点多,主要修改6个文件,实现了手动切换主题模式,cookie 记录状态,自动切换亮色logo和暗色logo,就这些了,根据时间自动切换的功能没做,太晚了,得空在做吧。

本站已经换主题,可以访问 https://bf.iowen.cn/ 查看效果,Swallow 主题同样有夜间模式,右下小工具栏可以体验

补个图

知更鸟 Begin WordPress 主题添加夜间模式

css 文件

上干货,css文件知更鸟主题应该可以直接用,其他主题可能有一些没有匹配,请自己根据情况浏览器F12修改。

在主题css文件夹里新建一个 night-mode.css 文件,将下面的内容复制进去。

/*
 * 知更鸟 Begin WordPress 主题添加夜间模式
 * 原文地址:https://www.iowen.cn/robin-begin-theme-adding-night-mode/
 */
body{transition:cubic-bezier(0, 0, 0.2, 1) .2s;}
.ioc-dark-mode {background-color: #1a1b1f;}
.ioc-dark-mode,.ioc-dark-mode a:not(.btn) {color: #ddd;}
.ioc-dark-mode a:not(.btn):hover{color: #19B5FE;}
.ioc-dark-mode a:not(.btn):focus {color: #ddd;}
.ioc-dark-mode body, .ioc-dark-mode button, .ioc-dark-mode input, .ioc-dark-mode select, .ioc-dark-mode textarea{color: #eee;}
/*菜单*/
.ioc-dark-mode #menu-container,.ioc-dark-mode #header-top {background: #242528;border-color:#242528}
.ioc-dark-mode #user-profile, .ioc-dark-mode #user-profile a,.ioc-dark-mode .nav-login{color: #aaa;}
.ioc-dark-mode #site-nav .down-menu ul li,.ioc-dark-mode .top-menu ul li {background: #393e42;border-color:#393e42}
.ioc-dark-mode .nav-menu ul,.ioc-dark-mode .top-menu ul{border-color:transparent}
.ioc-dark-mode #site-nav .down-menu ul li > a:hover,.ioc-dark-mode .top-menu ul li > a:hover{color: #fff;background: #45474a}
.ioc-dark-mode .search-input input{background: rgba(34, 34, 34, 0.5);border-color:#393e42}
.ioc-dark-mode .cat-con-section{background: rgba(50, 55, 60, 0.8);border-color:transparent}
.ioc-dark-mode .cat-con-section {border-bottom: 3px solid #ef5e32;}
/*文章列表*/
.ioc-dark-mode #site-nav .down-menu a {color: #ddd;}
.ioc-dark-mode .post,.ioc-dark-mode #page .page, .ioc-dark-mode .bulletin, .ioc-dark-mode .single-picture .picture, .ioc-dark-mode .type-attachment, .ioc-dark-mode .single-tao .tao, .ioc-dark-mode .single-video .video {background-color: #232425;box-shadow:none}
.ioc-dark-mode .content-area.common .post:hover,.ioc-dark-mode .cms-news-grid-container .post:hover,.archive.ioc-dark-mode  .site-content .post:hover{background: #313339;}
.ioc-dark-mode .tab-bd {background-color: #232425;box-shadow:none}
.ioc-dark-mode .tab-product .tab-hd .current,.ioc-dark-mode  .tab-area .current,.ioc-dark-mode .tab-hd {background-color: #232425;}
.ioc-dark-mode .tab-product .tab-hd .current:hover,.ioc-dark-mode  .tab-area .current {background-color: #292a2d;}
.ioc-dark-mode .all-cat, .ioc-dark-mode .tab-site, .ioc-dark-mode .cat-container, .ioc-dark-mode .tg-site, .ioc-dark-mode .slider-rolling-box{background-color: #232425;}
.ioc-dark-mode .more-list li a {background: #393e42;border-color:#393e42}
.ioc-dark-mode .cat-container .cat-title{background-color: #232425;}
.ioc-dark-mode .message-tab ul li,.ioc-dark-mode .message-widget ul li{border-color:#393e42}
/*按钮*/
.ioc-dark-mode .type-cat a,.ioc-dark-mode  .child-cat a{background-color: #45474a;border-color:#45474a }
.ioc-dark-mode .type-cat a:hover,.ioc-dark-mode  .child-cat a:hover{color: #fff;background-color: #19B5FE;border-color:#19B5FE }
.ioc-dark-mode .ias-trigger-next a{background-color: #45474a;border-color:#45474a }
.ioc-dark-mode .pagination a, .ioc-dark-mode .pagination a:visited{background-color: #45474a;border-color:#45474a }
.ioc-dark-mode .pagination .current, .ioc-dark-mode .pagination .dots{background-color: #45474a;border-color:#45474a }
.ioc-dark-mode .pagination span.current, .ioc-dark-mode .pagination a:hover{color: #fff;background-color: #19B5FE;border-color:#19B5FE }
.ioc-dark-mode .link-f a{background-color: #45474a;border-color:#45474a }
.ioc-dark-mode .link-f a:hover{background-color: #19B5FE;border-color:#19B5FE }
/*文章*/
.ioc-dark-mode .widget,.ioc-dark-mode .widget_ajax .new_cat,.ioc-dark-mode .ajax_widget_content .tab_title a,.ioc-dark-mode .zm-tabs-nav a{background: #232425;border-color:transparent}
.ioc-dark-mode .ajax_widget_content .tab_title.selected a,.ioc-dark-mode .ajax_widget_content .tab_title a:hover,.ioc-dark-mode .zm-tabs-nav .current a,.ioc-dark-mode  .tab-recent a{background: #292a2d;}
.ioc-dark-mode .zm-tabs-nav .current .be,.ioc-dark-mode  .tab-recent .be{color: #fff}
.ioc-dark-mode #sidebar h3 {background:transparent;border-color:#444}
.ioc-dark-mode .web-font{color: #444;-webkit-text-stroke-color: #444;}
.ioc-dark-mode .single-content h3 {background: #45474a;}
.ioc-dark-mode #fontsize,.ioc-dark-mode .single-meta .views, .ioc-dark-mode .single-meta li a,.ioc-dark-mode .off-side:after,.ioc-dark-mode .on-side:after,.ioc-dark-mode .reply a,.ioc-dark-mode #respond h3 a,.ioc-dark-mode .comment-tool a {background-color: #45474a;border-color:#45474a }
.ioc-dark-mode #fontsize:hover , .ioc-dark-mode .single-meta li a:hover,.ioc-dark-mode .off-side:hover::after,.ioc-dark-mode .on-side:hover::after,.ioc-dark-mode .reply a:hover,.ioc-dark-mode #respond h3 a:hover,.ioc-dark-mode .comment-tool a:hover{color: #fff;background-color: #19B5FE;border-color:#19B5FE }
.ioc-dark-mode blockquote {border-color:#555 }
.ioc-dark-mode .single-content p a:hover {color: #19B5FE!important}
.ioc-dark-mode .single-content code {background: #45474a;color: #eee;}
.ioc-dark-mode .single-cat-tag,.ioc-dark-mode  .meta-nav,.ioc-dark-mode .tg-site,.ioc-dark-mode #shuoshuo_content {background: #232425;border-color:transparent}
.ioc-dark-mode .meta-nav:hover{background: #313339;}
.ioc-dark-mode .authorbio, .ioc-dark-mode .comments-title,.ioc-dark-mode #related-img,.ioc-dark-mode #respond,.ioc-dark-mode .comment-list li {background: #232425;border-color:transparent;box-shadow: none}
.ioc-dark-mode .related-title{background:transparent;}
.ioc-dark-mode #comment,.ioc-dark-mode #comment-author-info input{background:#45474a;border-color:transparent}
.ioc-dark-mode #respond .comment-form-author label, .ioc-dark-mode #respond .comment-form-email label, .ioc-dark-mode #respond .comment-form-url label, .ioc-dark-mode #respond .comment-form-qq label, .ioc-dark-mode #respond .comment-form-comment label{color: #eee;background:#555;border-color:transparent}
.ioc-dark-mode .QapTcha .bgSlider {background-color: #45474a;border-color:#45474a;}
.ioc-dark-mode #log-box,.ioc-dark-mode .qqonline-main{background: #45474a;border-color: #45474a}
.ioc-dark-mode #catalog-ul li a:hover {background: #555}
.ioc-dark-mode .qq-arrow .arrow-y,.ioc-dark-mode .qq-arrow .arrow-x{color: #45474a}
.ioc-dark-mode .nline-qq>a {background: transparent!important}
.ioc-dark-mode #hitokoto{ background:rgba(100, 100, 100, 0.3)}
.ioc-dark-mode .like a,.ioc-dark-mode .share-s a,.ioc-dark-mode .shang-p a {background-color: #45474a;border-color:#45474a }
.ioc-dark-mode .shang-empty span{background: #232425;border-color:transparent}
.ioc-dark-mode #shang{background: #45474a;border-color: #45474a}
.ioc-dark-mode .s-weixin ul{border-color: #45474a}
/**/
.ioc-dark-mode .favorites-top,.page-template-template-random.ioc-dark-mode #main,.ioc-dark-mode .sites,.ioc-dark-mode .mon-list{background: #232425;border-color:transparent}
.ioc-dark-mode .archive-list,.ioc-dark-mode .day-box{border-color:#45474a }
.ioc-dark-mode .sites-cats{background: #292a2d;border-color:transparent}
.ioc-dark-mode .favorites-top #localtime font{color: #ddd!important}
.ioc-dark-mode .weather a{color: #ddd!important}
.ioc-dark-mode .entry-code textarea{background:#45474a;border-color:transparent}
.ioc-dark-mode .options{background-color: #45474a;border-color:#45474a }
.ioc-dark-mode .entry-code select{background-color: #555;border-color:#333 }
.ioc-dark-mode .single-content img, .ioc-dark-mode .thumbnail a img {background: url(./img/iowen.svg) no-repeat center #444;}
.ioc-dark-mode .archives-header{border-color:transparent}
.page-template-template-archives.ioc-dark-mode .year{border-color:#45474a ;border-left: 5px solid #0088cc;}
.page-template-template-archives.ioc-dark-mode .mon{color: #999}
/*页脚*/
.ioc-dark-mode #colophon,.ioc-dark-mode #footer-widget-box{background: #242528;color: #888;}

引用上面着个 css 文件,在页面 bodyclass 添加 .ioc-dark-mode 样式就可以看到效果了。

知更鸟主题在inc\theme-setup.php文件里面添加引用代码,注意放在其他 css 文件下面。

wp_enqueue_style( 'night-style', get_template_directory_uri() . '/css/night-mode.css', array(), '1.0', 'all');

放哪?参考文件格式添加吧,因为主题版本不同可能有出入。其他主题就自行找吧。可以直接放到主题的functions.php文件最下面试试,反正我没成功,因为我放这里在前端night-mode.css文件最先加载了。

接下来就是修改 php js 等内容了,文章写到半夜,请允许我隐藏一下 ︿( ̄︶ ̄)︿

此处为隐藏的内容!

发表评论并刷新,才能查看

发表评论

上文的css文件也可以用 add_action('wp_head','dark_mode'); 的方法添加到主题里面。

版权声明:一为 发表于 6个月前 (06-28),共 10302 字。
转载请注明:知更鸟 Begin WordPress 主题添加夜间模式 | 一为忆

23 条评论

  • avatar

    锟斤拷锟斤拷锟斤拷锟斤拷@锟较碉拷 ( VIP 1 )

    回复

    学习一下 感谢分享

  • avatar

    命悬十秒 ( VIP 1 )

    回复

    来学习学习

  • avatar

    ( VIP 1 )

    回复

    不错的主题,很期待呢? 有QQ讨论群可以交流么

  • avatar

    555 ( VIP 1 )

    回复

    过来学习

  • avatar

    UER ( VIP 1 )

    回复

    主题是越来越好了

  • avatar

    小黑果 ( VIP 1 )

    回复

    主题是越来越好了

  • avatar

    趣知识 ( VIP 1 )

    回复

    主题是越来越好了

  • avatar

    小猪乔治 ( VIP 1 )

    回复

    厉害,主题好看

  • avatar

    心有君兮 ( VIP 1 )

    回复

    厉害,主题好看

  • avatar

    缘份 ( VIP 1 )

    回复

    谢谢

  • avatar

    新闻头条 ( VIP 1 )

    回复

    w文章不错非常喜欢

  • avatar

    swallow ( VIP 1 )

    回复

    测试隐藏 :razz:

  • avatar

    武陵红苗 ( VIP 1 )

    回复

    学习啦

  • avatar

    isdola ( VIP 2 )

    回复

    不错,成功了,谢谢分享

  • avatar

    isdola ( VIP 2 )

    回复

    好奇怪,评论刷新后隐藏内容居然还是无法正常查看,我再评论一次试试

    • avatar

      一为

      回复

      @isdola 应该不会吧,缓存问题? :shock:

  • avatar

    isdola ( VIP 2 )

    回复

    过来看下这个效果是如何实现的

2019/12/2 17:30
WebStack 导航主题升级 Font Awesome 5 图标库 详情