建站技巧

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

 11个月前 (06-28)     1.7K  
文章目录

一直想给知更鸟 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'); 的方法添加到主题里面。

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

51 条评论

  • avatar

    sunny ( VIP 1 )

    回复

    我是begin主题,做完所有步骤,点击感叹号的按钮没有反应。

  • avatar

    sunny ( VIP 1 )

    回复

    这个真棒

  • avatar

    . ( VIP 1 )

    回复

    谢谢

  • avatar

    . ( VIP 1 )

    回复

    感谢分享

  • avatar

    锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷-锟酵凤拷 ( VIP 1 )

    回复

    很棒的一个教程

  • avatar

    依晨 ( VIP 1 )

    回复

    到此一游~~

  • avatar

    Isaac_han ( VIP 1 )

    回复

    想要您的博客主题,怎么样才能获得,导航和博客都想要,做的太棒了

  • avatar

    deer ( VIP 1 )

    回复

    试试看

  • avatar

    Me Teewang ( VIP 1 )

    回复

    快看看

  • avatar

    Lvtu ( VIP 1 )

    回复

    试试其它主题可以直接用不?

  • avatar

    锟斤拷锟斤拷 ( VIP 1 )

    回复

    我不是知更鸟 失败了

  • avatar

    佛系软件 ( VIP 1 )

    回复

    学习学习

  • avatar

    Youth. ( VIP 1 )

    回复

    学习一下

  • avatar

    一锟斤拷锟剿的孤碉拷 ( VIP 1 )

    回复

    看看能用不

  • avatar

    烈火 ( VIP 1 )

    回复

    到此一游~

  • avatar

    Youth. ( VIP 1 )

    回复

    不知道模板兔可以用不 先试试

  • avatar

    iami233 ( VIP 1 )

    回复

    感觉很强大啊

2020/5/1 12:50
通勤一个月,劳动节继续加班! 详情