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

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

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

补个图

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 文件，在页面 body 的 class 添加 .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'); 的方法添加到主题里面。