给WP的7B2主题增加夜间模式

背景

此主题7b2的作者现在在维护新的项目,主题已经很久不更新了,而且此主题出现的时间比较早,因此夜间模式这个功能也是没有的,所以只能自己加了

我在网上找了很多相关教程,但是都不尽人意,大部分不仅部署麻烦而且部署成功后也会有很多地方被遗漏,也就是有不少地方还是白色的模块,下面是我自己整理与修复的,并且本站也在用的夜间模式相关的代码。

增加夜间模式

增加夜间模式很简单的,就是css代码量太多了和重新写一个差不多了,其实重新写一个都比后来再增加的强,因为主题又不少模块不知道是干啥用的,而且也没有文档查看,怪麻烦的。

以下是网上公开的夜间模式代码,我自己也修复了一部分,将这个代码放入文件夹里

文件路径/wp-content/themes/b2childb2child是子主题,最好是放在子主题里)

文件名:functions.php

放入以下代码(包含白天和夜间模式的切换按钮)

// ========== 夜间模式终极修正版(统一使用 body.night) ==========

// 1. PHP 端:根据 Cookie 或服务器时间自动给 <body> 添加 night 类(无痕浏览器完美适配)
function child_add_night_body_class($classes) {
    // 优先检查 Cookie(手动切换优先)
    if (isset($_COOKIE['night']) && $_COOKIE['night'] === '1') {
        $classes[] = 'night';
    } else if (isset($_COOKIE['night']) && $_COOKIE['night'] === '0') {
        // Cookie 为 0 表示强制日间,不做任何事
    } else {
        // 没有 Cookie 时,用服务器时间判断(19:00-06:00)
        $hour = current_time('H'); // 获取 WordPress 时区的当前小时(0-23)
        if ($hour >= 19 || $hour < 6) {
            $classes[] = 'night';
        }
    }
    return $classes;
}
add_filter('body_class', 'child_add_night_body_class');

// ===== 极致防闪烁:使用 JS 在页面渲染前强制背景色(最高优先级) =====
function night_mode_force_body_bg() {
    if (isset($_COOKIE['night']) && $_COOKIE['night'] === '1') {
        echo '<style>body { background-color: #1a1a1a !important; }</style>';
    }
}
add_action('wp_head', 'night_mode_force_body_bg', 0);

// 2. 头部输出基础内联样式 + 防闪烁脚本(优先执行)
function night_mode_head_inline() {
    ?>
    <style id="night-mode-inline-style">
        /* ===== 新增:极早防闪烁的根样式 ===== */
        html.night {
            background-color: #1a1a1a !important;
        }
        html.night body {
            background-color: #1a1a1a !important;
            color: #cccccc !important;
        }
        /* ===== 原有样式保持不变(下方继续) ===== */
        body.night .site-header,
        body.night .header,
        body.night .top-menu,
        body.night .navigation,
        body.night .widget,
        body.night .sidebar .widget,
        body.night .box,
        body.night .post-card,
        body.night .module,
        body.night .panel,
        body.night .entry-content,
        body.night .post-content,
        body.night .article-content,
        body.night .comment-content,
        body.night .content-area,
        body.night #content,
        body.night .main-container,
        body.night footer,
        body.night .site-footer {
            background-color: #1a1a1a !important;
            color: #cccccc !important;
            border-color: #333333 !important;
        }
        body.night a {
            color: #6ea8fe !important;
        }
        body.night img {
            filter: brightness(0.8);
        }
        body.night input,
        body.night textarea,
        body.night select,
        body.night button,
        body.night .button {
            background-color: #333333 !important;
            color: #eeeeee !important;
            border-color: #555555 !important;
        }
    </style>
    <script>
    // ===== 优化版防闪烁脚本:操作 <html> 类 + 刷新保持深色(时间改为19:00) =====
    (function() {
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1");
        if (night === '1' || (night === '' && (new Date().getHours() >= 19 || new Date().getHours() < 6))) {
            document.documentElement.classList.add('night');
            // 双重保险:直接修改样式
            document.documentElement.style.backgroundColor = '#1a1a1a';
        }
    })();
    </script>
    <?php
}
add_action('wp_head', 'night_mode_head_inline', 1);

// 3. 页脚输出切换按钮和逻辑
function night_mode_footer() {
    ?>
    
    <button id="nightModeToggle" title="切换昼夜模式">☀️</button>

    <script>
    (function() {
        var body = document.body;
        var btn = document.getElementById('nightModeToggle');
        if (!btn) return;

        // 全局切换函数(只操作 body 上的 night 类)
        // max-age=3600为Cookie1小时过期。有效期内遵循用户手动设置,过期后根据服务器时间自动切换。
        window.nightModeToggle = function() {
            if (body.classList.contains('night')) {
                body.classList.remove('night');
                btn.innerHTML = '☀️';
                document.cookie = 'night=0;path=/;max-age=3600';
            } else {
                body.classList.add('night');
                btn.innerHTML = '🌙';
                document.cookie = 'night=1;path=/;max-age=3600';
            }
        };

        // 事件委托,确保按钮在任何时候都能点击
        document.addEventListener('click', function(e) {
            if (e.target.closest('#nightModeToggle')) {
                nightModeToggle();
            }
        });

        // 初始化图标(根据 body 是否已有 night 类)
        if (body.classList.contains('night')) {
            btn.innerHTML = '🌙';
        }
    })();
    </script>
    <?php
}
add_action('wp_footer', 'night_mode_footer', 99);
// ========== 夜间模式功能集成结束 ==========

文件名:style.css包含按钮样式

/* ==================== 夜间模式全局样式 ==================== */
/* ========== 全面强化暗黑样式 ========== */
/*黑夜模式开始*/
body.night .info-box,body.night .i-price{
  
    background: #3d3d3d;
}
body.night .infomation-list-top,body.night .info-list {
    border-bottom: 1px solid #535353;
}
.social-top .header-user {
    width: auto;
}
body.night .user-credit,body.night .user-money{
    color: #adb5bd!important;
}
body.night .topic-name-data b {
    color: #adb5bd;
}
body.night .po-topic-textarea .topic-content {
    color: #adb5bd;
}
body.night .message-content p {
    color: #adb5bd;
}
/*标题栏目*/body.night .comment-info span {
color:#adb5bd
}
body.night .base-header h3 {
  color: #f0f0f0;
}
body.night .base-header h3::after {
  background: #475569;
}
body.night .base-header h3:before {
  background: #475569;
}
/*标题栏目结束*//*夜间登录背景*/
body.night .login-box-img {
    background: linear-gradient(314deg,#946801 0%,#475569 100%);
}
/*夜间登录背景*/body.night .header-login-button button {
    border: 1px solid #333 !important;
    background: #333 !important;
}
body.night .login-bottom button {
    background: #475569 !important;
    border: 1px solid #475569 !important;
}
/*style*/@media screen and (max-width: 768px){
body.night .menu-icon {
    background: #333;
    }
    
body.night .login-button .b2-account-circle-line {
    color: #aaaeb3;
}    
body.night .top-menu-ul > li.depth-0:first-child > a {
    color: #adb5bd!important;
}    
body.night .social-top .header-banner-content .header-banner-left {
    width: 100%;
    height: 48px;
    border-top: 0px solid #eaeaea;
}
body.night .social-top .show-menu-box .header-logo {
    width: 100%;
    background: #292a2d;
    padding: 12px;
    top: 0;
    left: 0;
}
body.night .menu-icon .line-1,body.night .menu-icon .line-2,body.night .menu-icon .line-3 {
    background-color: #aaaeb3;
    }  
body.night .login-button .b2-user {
    color: #aaaeb3;
    }    
/* 这个代码会给夜间移动端头像加边框导致切换白天夜间时移动端顶部头像位置会移动所以改成了0px */
body.night .mobile-show {
    border: 0px solid rgba(255,255,255,0) !important;
    }
body.night .mobile-footer-menu {
    background: #252829;
    }
body.night .mobile-footer-center button {
    background: 0;
    border: 0;
    }
body.night .show-menu-box .top-menu .top-menu-ul {
border-left: 0px solid #272a2b;
    }
body.night .top-menu ul li.depth-0 > a:after {
background: #272a2b;
    }
body.night .show-menu-box .top-menu .sub-menu {
background: #272a2b;
    }
body.night .show-menu-box .top-menu .sub-menu a {
color: #909399;
    }
body.night .logo-left .mobile-box,body.night .top-menu-ul>li.depth-0>a i.b2-arrow-down-s-line {
    background: #292a2d;
    }
body.night .top-menu ul li.depth-0>a {
    background: #292a2d;
    }
body.night .header-tools {
    background-image: url(https://worker-img-blog.11002233.xyz/wp-content/uploads/2026/05/1779386710-night1.png);
    }
body.night .close-button {
    color: #ddd!important;
}
body.night .ubanner-ctn h2 {
  font-size: 22px !important;
}
}
body.night .ye {
  color: #475569;
}
body.night .poster {
  filter: sepia(0) grayscale(1) brightness(38%);
}
body.night .post-style-5 header h1 {
    background-repeat: repeat-x;
    background-position: 100% 100%;
    color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
}
body.night .ubanner-ctn h2 {
  text-align: center;
  color: #fff;
  font-size: 46px;
  font-weight: 600;
  margin-bottom: 65px;
  letter-spacing: 1px;
  text-shadow: 0 3px 6px rgba(0,0,0,0.2);
    background-position: 100% 100%;
    color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* 侧栏文章列表样式 */
body.night .b2-widget-hot ul .widget-post:hover {
    cursor: pointer;
    background: linear-gradient(225.08deg,#2d3031 0%,#161819 96.09%);
    box-shadow: 1px 1px 2px #323638, -1px -1px 0px #292a2d;
}
body.night .widget-area .box h2 {
    color: #ffffff8f;
}
body.night .link-overlay:hover {
    color: #475569;
    text-decoration-line: none;
}
/* 侧栏文章列表样式 */
body.night .post-next .post-pre-next-info:hover {
    cursor: pointer;
    background: linear-gradient(225.08deg,#161819 0%,#2d3031 96.09%);
    box-shadow: 1px 1px 2px #292a2d, -1px -1px 0px #292a2d;
}
body.night .post-pre .post-pre-next-info:hover {
    cursor: pointer;
    background: linear-gradient(225.08deg,#2d3031 0%,#161819 96.09%);
    box-shadow: 1px 1px 2px #292a2d, -1px -1px 0px #292a2d;
}
body.night .b2-menu-3 .sub-menu-0>li:hover>a, .b2-menu-3 .sub-menu-0 a:hover {
    background: linear-gradient(225.08deg,#262829 0%,#292a2d 96.09%);
}
body.night .widget ul li,body.night .aside-bar div>div+div{
    border-top:1px solid rgba(255,255,255,0)!important;
}
body.night .top-user-box-drop .avatar {
    border: #292a2d;
}
body.night .home-section-division,body.night .user-money,body.night .user-credit,body.night .site-terms,body.night .post-user-info,body.night .b2-audio-start-bar-box,body.night .post-tags-meat a .tag-img, body.night .content-hidden-info,body.night .widget-circle-info-desc,body.night .widget .recommended-widget li.picked a,body.night .comment-footer-tools .comment-vote-hidden button,body.night .comment-list button.text,body.night .user-sidebar-count li,body.night .following-info-desc,body.night .home-collection-image .collection-number.ar,body.night .insert-post,body.night .gold-page-list li:nth-child(odd),body.night .dmsg-content p,body.night .widget-new-header .ps1,body.night .widget-news-user,body.night .widget-new-header .ps a,body.night .pager-center,body.night .entry-content blockquote,body.night .post-content-footer .content-footer-poster button,body.night .collection-button,body.night .top-search .header-search-select,body.night .ds-textarea textarea,body.night input:focus,body.night .ds-item input,body.night .dmsg-textarea,body.night .desc textarea:focus,body.night .user-credit{
  background: #212425!important;
color:#adb5bd
}
body.night .user-sidebar-count li,body.night .ds-textarea textarea {
    border: 5px solid #323335;
}
body.night .user-money,body.night .user-credit {
    text-shadow: 0px 0px 0px rgba(0,0,0,0);
    color: #fff;
}
body.night, body.night #body, body.night .page_navi a.current {
    background-color: #292a2d!important;
    color: #adb5bd!important;
}
body.night #sidebar, body.night .next-page a,body.night .com-form>.b2-radius {
    background-color: #292a2d;
    color: #888282;
}
body.night .home-section-division .home-division li h3 .go,body.night .bar-top,body.night .yarpp-related ol li:before {
    background: #475569;
}
body.night .home-section-division .home-division a:hover .item-thumb,body.night .home-section-division .home-division a:hover h3,body.night .tax-info-item .fliter-button:hover,body.night .pay-type li>button {
  color: #475569
}
body.night .home-section-division .home-division a {
    color: #525252;
}
@media (min-width:1024px) {
  body.night .home-section-division .home-division li.li_4 .item {
    background: #131313;
    color: #475569
  }
  body.night .home-section-division .home-division li.li_4 .item:hover {
    background: #475569;
    color: #fff
  }
}
body.night .lv-icon.user-lv i,body.night .custom-page-row.gold-row,body.night .modal.address-box .pay-box-content li.picked,body.night .pay-box-content li:hover,body.night .sah-catlist a,body.night .gujia .s-a-c-l h2,body.night .gujia .sah-name,body.night .gujia .sah-date,body.night .gujia .sah-r>div,body.night .gujia .sah-avatar,body.night .gujia .saf-z button,body.night .gujia .item-content::before,body.night .gujia .item-content::after {
    background-color: #292c2d;
}
body.night .bar-middle,body.night .bar-footer,body.night .aside-container .bar-user-info,body.night .bar-normal {
    box-shadow: -8px 0px 35px 0px rgba(0,0,0,0);
}
body.night .bar-user-info-row-title>a,body.night .related-posts .related-posts-title,body.night .post-3 .post-modules-top, .post-5 .post-modules-top,body.night .topic-vote-desc,body.night .home-collection-row-1,body.night .news-item ul,body.night .dmsg-list li {
    border-bottom: 1px solid rgba(255,255,255,0);
}
body.night .bar-mission .mission-today-list li,body.night .topic-type-menu,body.night .post-5 .load-more,body.night .post-5 .b2-pagenav,body.night .news-item+.news-item,body.night .news-item li+li,body.night .task-day-list li {
    border-top: 1px solid rgba(255,255,255,0);
}
body.night .related-posts .related-posts-item,body.night .top-search-select {
    border-right: 1px solid rgba(255,255,255,0);
}
body.night .next-jt i {
    background-color: rgba(255,255,255,0);
}
body.night .login-social-button-bottom,body.night .post-content-footer .content-footer-poster button {
    border: 1px solid rgba(0,0,0,0);
}
body.night .login-form-item input:focus {
    border-color: #475569;
}
body.night .login-eye .b2-eye-open,body.night .login-form-item input:focus + span,body.night .entry-content a:hover,body.night .tax-search button i,body.night .b2-audio-button {
    color: #475569;
}
body.night .user-w-logon:after {
    background-image: linear-gradient(0deg,#292a2d 0,rgb(29, 31, 32) 100%);
}
body.night .oauth-login-button {
    border-top: 1px dashed #444;
    border-bottom: 1px dashed #444;
    background: #292a2d;
}
body.night .comment-overlay {
    background-color: rgba(29, 31, 32, 0.91);
}
body.night .open-message{
    background: #292a2d!important;
    color: #adb5bd!important;
}
body.night .content-hidden-info {
    background-image: none;
}
body.night .post-5 .post-info h2::before,body.night .user-w-announcement li a::before,body.night .tax-fliter-hot .order-items a:hover {
    background-color: #475569;
}
/*
 * 无图文章列表浮动
 */body.night .post-5 .b2_gap {
    margin-top: 10px;
    margin-right: 0;
    background: #313131;
}
body.night .post-5 .b2_gap > li {
    background: #292a2d;
    margin: 0;
    transition: all .3s;
    border-right: 0;
    border-bottom: 1px solid #272a2b;
    border-left: 1px solid #272a2b;
    box-shadow: none;
}
body.night .post-5 .b2_gap > li:hover {
    -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 10px 20px #121415
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
    position: relative;
    z-index: 5;
}
body.night .b2_gap > li .item-in {
    transition: all .3s;
}
/** 文章卡片 */
body.night .soft-area {
    border: 1px solid #292a2d;
    background: #292a2d;
}
body.night .post-style-6-meta {
    background-color: #212425;
    box-shadow: 0px 0px 2px #323638, inset 0px 2px 3px #151617;
}
body.night .post-style-6-meta .meta_left span {
    color: #fff;
}
body.night .post-style-6-top .info6fwq li {
    border-bottom: 1px solid #666;
    color: #aaaeb3;
}
body.night .site-content .soft-area .area-c .soft-detail h1 {
    color: #fff;
}
body.night .post-style-6-top .dz6fwq a {
    background: linear-gradient(90deg,#475569,#c58f11);
}
body.night .post-style-6-top .dz6fwq a:hover {
    background: linear-gradient(90deg,#e8a711,#475569);
}
body.night .post-style-6-top .dz6fwq a:hover {
    box-shadow: 0px 5px 10px #ffd77945;
}
body.night .post-style-6-top .info6fwq li:before {
    background: #475569;
}
/* h3搜索标题 */
body.night .insearch {
    line-height: 1.5;
    background-image: linear-gradient(135deg,#232425,#292a2d),linear-gradient(-90deg,#1e1f20 0%,#696969 100%);
    /* border-bottom: .1rem solid; */    
    border-image: linear-gradient(-90deg, #1e2021, #475569);
  font-size: 22px !important;
  padding: 6px;
  filter: drop-shadow(-4px 0 0 #475569);
}
body.night .insearch:before {
    margin-right: 6pt !important;
    color: #475569 !important;
    content: "\e622" !important;
    right: 0;
}
body.night .entry-content>h3 {
    margin: 30px 0 30px 0 !important;
}
/** 下载卡片 */
body.night .download-item {
    padding: 40px;
    margin-top: 60px;
    background: #2E3138;
    border: 1px solid #333740;
    box-sizing: border-box;
    box-shadow: inset -1px -1px 0px #292a2d, inset 1px 1px 4px #292a2d;
}
body.night .download-rights {
    background: linear-gradient(225.08deg, #535966 0%, #2E3138 96.09%);
    box-shadow: 0px 2px 8px rgba(26, 28, 31, 0.79652);
}
body.night .download-info {
    background: linear-gradient(225.08deg, #3d414a 0%, #2E3138 96.09%);
    box-shadow: 0px 2px 8px rgba(26, 28, 31, 0.79652);
}
body.night .download-info ul {
    display: flex;
    flex-flow: wrap;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: #2e3138;
    box-shadow: 0px 0px 2px #535966, inset 0px 2px 3px #1A1C1F;
}
body.night .post-style-6 .download-current {
    background: #2e3138;
    box-shadow: 0px 0px 2px #535966, inset 0px 2px 3px #1A1C1F;
}
body.night .entry-content .button {
    border: 1px solid #313540;
    background: linear-gradient(225.87deg,#393d46 2.76%,#26282d 94.28%);
    font-weight: 600;
}
body.night .download-rights ul li {
    border-top: 1px dashed #2a2c31;
}
body.night .entry-content .button:hover {
    background: linear-gradient(225.87deg,#2a2d33 2.76%,#2a2c32 94.28%);
    color: #fff;
    box-shadow: 1px 1px 0px #141618, -1px -1px 1px #535966;
}
body.night .download-button-box a{
    color: #fff;
}
body.night .download-list.gujia .gujia-bg {
    background-color: #252627;
}
body.night .download-list.gujia .download-button-box div {
    background-color: #252627;
}
/*style end*//*夜间样式开始*/
body.night #content .post p a, body.night .floor {
    color: #af8f77;
}
body.night a, body.night a:link, body.night a:visited,body.night .topic-comment-left textarea,body.night .name,body.night .item-title,body.night .nav-name,body.night .top-user-box-drop .top-user-info-box-count p,body.night .top-user-info-box-name h2,body.night .home-section-division .home-division li h3,body.night .bar-mission .user-w-qd-list-title p,body.night .login-title span,body.night .item-content .b2-out{
    color: #adb5bd;
}
body.night #comments form textarea, body.night #comments form input {
    background-color: #292a2d;
    color: #888282;
}
body.night #content .menufeng {
    border-bottom: 1px solid #989292;
}
body.night .author-edit-page .author-edit-list>li,body.night .vip-top,body.night .collection-info,body.night .stream-article,body.night .stream-area .b2-pd {
    border-bottom: 1px solid #232627;
}
body.night .vip-allow.allow {
    color: #676c6f;
}
body.night #comments form textarea, body.night #comments form input, body.night #shangerweima {
    border: 1px solid #989292;
}
body.night .topic-comment-list,body.night .topic-comment-list-header,body.night .topic-lv1+.topic-lv1,body.night .topic-comment-list-footer,body.night .user-panel .avatar,body.night .com-form-textarea,body.night .ds-item,body.night .pay-type li>button {
    border: 1px solid #242627;
color:#adb5bd
}
body.night #nav .menu ul{
    background: #292a2d;
}
body.night .site,body.night .widget-comment-contnet,body.night .circle-desc,body.night .po-topic-textarea textarea:first-child,body.night .post-list-cats a span,body.night .top-style-blur,body.night .shop_bg,body.night .news-header,body.night .news-item-header span.new-tag,body.night .news-item-header span,body.night .news-header .banner .banner-text .btn,body.night .com-form-textarea textarea,body.night .content-excerpt,body.night .shop-single-data-count button,body.night .shop-single-data li.shop-single-data-price,body.night .shop-single-data-count input,body.night .single-document-footer,body.night .document-cat-item:hover,body.night .content-ds,body.night .message-content p.comment span,body.night .topic-comment-form,body.night .topic-child-list ul,body.night .topic-footer-left button,body.night .topic-meta-more-box ul,body.night .topic-loading-more-button,body.night .entry-content p > code,body.night .post-tags-meat a,body.night .b2-light-dark-outside,body.night .filter-items a,body.night .topic-image-light,body.night .user-w-rw,body.night .user-credit,body.night .vip-count ul li .vip-in,body.night .mission-tk,body.night .top-user-box-drop.show,body.night .top-user-info-box .user-w-gold a i,body.night .tax-fliter-hot,body.night .bar-user-info-row .user-w-gold div,body.night .mission-page-list li:nth-child(even),body.night .modal-content{
    background:#292a2d;
color:#adb5bd
}
body.night .bar-normal,body.night .box,body.night .span4,body.night .footer-fav,body.night .post-5 .b2_gap,body.night .news-item-header span::after,body.night .tbox,body.night .buy-resout-box,body.night .news-item-header b,body.night .sub-menu,body.night .topic-comment-form.show textarea,body.night .content-hidden-before i,body.night .content-hidden-end span,body.night .tax-fliter-cat,body.night .tax-search input,body.night .bar-item-desc,body.night .boxt,body.night .nav-detail-portfolio-wrapper,body.night .author-page-right,body.night .po-topic-box-tips{
    background:#323335;
}
body.night .bar-footer,body.night .aside-container .bar-user-info,body.night .bar-user-info-row,body.night .user-w-tj,body.night img.avatar,body.night .topic-card-box li,body.night .topic-video-box li>div video,body.night .topic-guess-box,body.night .widget .recommended-widget li a:hover,body.night .collection-posts li span,body.night .dmsg-list li:hover,body.night .mask-wrapper {
    background-color: #323335;
color:#adb5bd
}
body.night .button,body.night button {
    background: #292a2d;
    /*border: 1px solid #475569;*/}
body.night button.empty,body.night .button.empty {
    background: #333;
}
body.night .search-button-action,body.night .login-eye.button,body.night .my-circle-list>div>button,body.night .topic-drop>button,body.night .tax-search button,body.night .change-theme button,body.night .po-post-icons button,body.night .po-close-button button,body.night .gold-list-row-5,body.night .gold-list-row-1,body.night .gold-list-row-2,body.night .gold-list-row-3,body.night .gold-list-row-4,body.night .gold-page-list,body.night .site-footer .widget-title,body.night button,body.night .po-topic-top-right button,body.night .topic-type-menu>ul li button,body.night .po-ask button,body.night .topic-footer-right button,body.night .topic-author-info-right button,body.night .mfp-iframe-holder .mfp-close,body.night .tax-info-item .fliter-button,body.night .login-box-content .login-social-button-bottom a {
    background: 0 0;
    border: 0;
}
body.night button.empty,body.night .button.empty,body.night li.current-menu-item > a,body.night .topic-comment-content:hover button,body.night .top-menu-hide:hover .more,body.night .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down,body.night button.text,body.night .entry-content a.button.empty,body.night .entry-content a.button.text,body.night .user-sidebar-info.active p {
    color: #475569;
}
.b2-light, .newsflashes-nav-in ul li.current-menu-item a {
    background-color: #47556912;
}
body.night .user-w-rw,body.night .user-credit{
    text-shadow:none;
}
body.night .user-w-qd-list-title{
   background-color:rgb(0, 88, 255,0.66); 
}
body.night .user-w-rw-bg,body.night .po-topic-button,body.night .topic-type-menu button.picked,body.night .btn-orange,boby.night .user-w-announcement li a::before{
    background-color: #475569;
    color: #fff;
}
body.night .b2-color,boby.night .po-topic-top-right .picked,body.night .top-user-box-drop li a i{
    color: #475569!important
}
body.night #public .topic-type-menu {
    background: rgba(41, 48, 66, 0.4);
}
body.night .wenzi,body.night .news-item-content p,body.night .news-header .banner .banner-text h4,body.night .topic-footer-right button,body.night .user-w-tj span {
    color: #9a9a9a;
}
body.night .gdd-quick-link-buy-vip__hover-block,body.night .gdd-quick-link-buy-vip__popover--btn,body.night .gdd-quick-link-buy-vip,body.night .gdd-quick-link-buy-vip__popover {
    background-color: #475569;
    color: #fff;
}
body.night .widget-comment-contnet.jt:before, body.night .widget-comment-contnet.jt:after,body.night #public .my-circle-list button.picked:before,body.night #public .my-circle-list button.picked:after {
    border-bottom-color: #202634;
}
body.night .shop-box-price {
    background: #242a38;
    border-top:none;
    border-bottom: none;
}
body.night .post-pay-type .post-pay-type-icon{
    color: #3e74a3;
}
body.night .comment-list button.text,body.night .top-search .header-search-select {
    border: 1px solid #212425;
}
body.night .b2-widget-title h2, .widget > h2{
    color: inherit;
}
body.night .topic-child-list li + li {
    border-top: 1px dashed #293042;
}
body.night .topic-comments:before{
    border-color: transparent transparent #202634;
}
body.night .widget-uisdc-helper .uisdc-helper-title {
    color: #475569;
    background: #222425;
}
body.night .custom-page-row.gold-row+.custom-page-row.gold-row {
    border-left: 10px solid #292a2d;
}
body.night .download-thumb::before {
    background: -webkit-radial-gradient(right top, ellipse cover, rgba(250, 250, 250, 0) 8%,rgb(41, 48, 66) 73%);
    background: radial-gradient(right top, ellipse cover, rgba(250, 250, 250, 0) 8%,rgb(41, 48, 66) 73%);
}
body.night .home_row,body.night .post-modules-top,body.night .post-5{
    background: rgba(0,0,0,0)!important;
}
body.night .b2-widget-comment,body.night .b2-widget-products,body.night .b2-widget-hot,body.night .po-topic-textarea,body.night .com-form-textarea textarea,body.night .topic-comment-list > ul,body.night .topic-comment-avatar,body.night .circle-info-left img,body.night .left-item img,body.night .logo-wrapper,body.night .mission-page-list ul{
    border: 1px solid #202634;
color:#adb5bd
}
body.night .box-header,body.night .site-title,body.night .shop-single-action-right .favorite-button,body.night .tax-info-item .fliter-button {
    color: #fff;
}
body.night .comment .comment-item,body.night .post-5 ul.b2_gap > li,body.night .user-w-tj,body.night .user-w-rw,body.night .document-row + .document-row,body.night .has_children .sub-menu,body.night .post-tags-meat,body.night .none-comment,body.night .topic-comments,body.night #filter-top ul li + li,body.night .b2-b-t,body.night .circle-widget-button,body.night .list-footer,body.night .vip-faq-list + .vip-faq-list,body.night .custom-page-row + .custom-page-row,body.night .no-request,body.night .request-box li{
    border-top: 1px solid #212425!important;
}
body.night .post-user-info,body.night .po-topic-textarea textarea:first-child,body.night .my-circle-list,body.night .user-w-rw,body.night .shop-single-attr-title,body.night .single-bottom h3,body.night .shop-single-data li,body.night .dmsg-header,body.night .message-list li,body.night .box-header,body.night .author-links,body.night .custom-page-title,body.night .entry-header{
    border-bottom: 1px solid rgba(114, 114, 114, 0.1);
}
body.night .my-circle-list > div + div {
    border-left: 1px solid #202634;
}
body.night .post-5 ul.b2_gap > li {
    border-right: 1px solid #202634;
}
body.night .shop-single-img-box,body.night .shop-single-data-count button,body.night .shop-single-data-count input,body.night .content-ds,body.night .post-tags-meat a,body.night .po-topic-tools-right button,body.night .widget-mission-footer a {
    border: none;
}
body.night .post-3 .post-3-li .item-in:hover {
    background-color: #212425;
    color: #ff6800;
}
body.night .entry-content,body.night .comment-content-text p,body.night .shop-single-data-count input,body.night .news-header .banner .banner-text h2,body.night .message-content p.comment span{
    color: #adb5bd;
}
body.night .comment-list .children article .comment-item {
    border: none;
}
body.night .block-logo,body.night .banner-img {
    display: none;
}
body.night .news-header .banner{
    display: block;
    margin: 50px 0;
}
body.night .news-header .banner .banner-text{
    width: auto;
}
.logo .light-logo{
    display: none;
}
body.night .light-logo {
    display: block;
}
body.night .entry-content > hr {
    background-image: -webkit-linear-gradient(left, #202634, #8c8b8b, #202634);
    background-image: -moz-linear-gradient(left, #202634, #8c8b8b, #202634);
    background-image: -ms-linear-gradient(left, #202634, #8c8b8b, #202634);
    background-image: -o-linear-gradient(left, #202634, #8c8b8b, #202634);
}
body.night .shop-single-data li.shop-single-data-price{
    background-image:none;
}
body.night .content-hidden-info {
    border: 1px dashed rgba(178, 186, 194, 0.17);
}
body.night .buy-vip__hover-block,body.night .buy-vip__popover,body.night .buy-vip__popover--btn{
    background-color: #0058ff!important;
}
body.night .buy-vip__popover--btn,body.night .header-user .iconday,body.night .b2-widget-hot-circle .b2-widget-title button{
    color: #fff;
}
body.night .buy-vip__popover--desc{
    color:#0058ff ;
}
body.night .modal-content {
    background-image: url(https://worker-img-blog.11002233.xyz/wp-content/uploads/2026/05/1779386710-night1.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
body.night .top-user-info-box {
    background-image: url(https://worker-img-blog.11002233.xyz/wp-content/uploads/2026/05/1779386714-night2.jpg);
}
body.night .header-search-select .select,body.night .header-search-select a:hover {
    background: #272a2b;
}
body.night .b2-menu-3 a:after{
background: linear-gradient(225.08deg,#292a2d 20%,#475569 90.09%);
}
/*加载中背景*/body.night .gujia .bg,body.night .widget .widget-gujia-hot-circle .widget-circle-info h2,body.night .widget-gujia-hot-circle .widget-circle-icon,body.night .widget-gujia-hot-circle .widget-circle-meta span,body.night .topic-guess-box,body.night .post-thumb,body.night .widget-gujia-user .user-w-announcement>div,body.night .mission-gujia .user-w-qd>div,body.night .mission-gujia .user-mission-info-left,body.night .mission-gujia .avatar-parent,body.night .dmsg-self .my-dmsg-content,body.night .my-dmsg-content,body.night table td {
    background: #272a2b;
}
body.night .preloader {
    background-color: rgb(0 0 0 / 80%);
}
body.night .preloader-loding {
    color: #475569;
}
body.night .preloader-lod,body.night .large-square {
    background: #475569;
}
body.night .header-banner{
    background-color: #292a2d;
}
body.night .social-top .header{
    border-top: 1px solid #292a2d;
margin-top: -2px;
}
/*灰白色字体*/
body.night .change-theme button i,body.night .button.empty,body.night .home-first .hf-widget,body.night .home-first .hf-widget .hf-widget-title a,body.night .ceo-cat-switcher h5,body.night #container-box-1,body.night .searchs input[type="text"],body.night .bar-item i,body.night .site-footer,body.night .item-in.box.b2-radius:hover,body.night .u-backgroundColorWhite,body.night .authorCard--description,body.night .authorCard--meta,body.night .authorCard--title,body.night .button, body.night button,body.night .vip-faq .vip-faq-list h2,body.night .vip-faq .vip-faq-list p,body.night .post-list-item:hover .post-list-meta-box,body.night .insert-post h2,body.night .file-down h2,body.night .content-ds-count{
    color: #adb5bd!important;
}
/*背景色*/
body.night .home-first .hf-widget,body.night .home-first .hf-widget-4 .hf-widget-content ul,body.night .site-footer,body.night .item-in.box.b2-radius:hover,body.night li.b2-widget-box.widget-post.widget-post-small:hover,body.night .u-backgroundColorWhite,body.night .w-a-count,body.night .write-select-row-top textarea,body.night .login-form-item input,body.night .forget-pass-info,body.night .vip-faq .vip-faq-list p,body.night .vip-faq .vip-faq-list{
    background-color: #323335!important;
color:#adb5bd
}
/*鼠标移上去字体变白*/
body.night .button.empty:hover{
    color: #FFF!important;
    transition: all .3s;
}
/*夜间圆角*/
body.night #author .author-page-right{
    border-radius: 20px!important;
}
body.night .home-first .hf-widget{
    border: 1px solid rgba(114, 114, 114, 0.1);
}
body.night .home-first .hf-widget .hf-widget-title,body.night .post-3 .post-3-li .item-in{
    border-bottom: 1px solid rgba(114, 114, 114, 0.1);
}
body.night .index-header,body.night .single-top-html,body.night #html-box-ad{
    opacity: 0.5;
}
body.night img{
    opacity: 0.7;
}
body.night .login-form-item input:focus + span:after,body.night .login-form-item input[class="active"] + span:after,body.night .login-form-item input:valid + span:after,body.night .po-ask button span{
    background: #292a2d!important;
}
body.night .recaptcha-button{
    border-top: 1px solid #292a2d;
}
body.night .recaptcha-button .recaptcha-send{
    border-left: 0;
}
body.night .vip-footer .vip-faq{
    background: none!important;
}
body.night textarea.topic-title{
    border-radius: 20px 20px 0 0;
}
body.night code,body.night .entry-content p > code{
    color: #ff3c98;
    background-color: rgba(253,153,153,.2)!important;
    font-weight: 600;
}
body.night .common-button{
    color: #FFF!important;
}
body.night #banner_wave_1 {
    width: auto;
    height: 65px;
    _filter: alpha(opacity=80);
display: none;
    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 1;
    opacity: 1;
    transiton-property: opacity, bottom;
    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 240s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 537px;
}
body.night #banner_wave_2 {
    width: auto;
    height: 65px;
    _filter: alpha(opacity=80);
display: none;
    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 1;
    opacity: 1;
    transiton-property: opacity, bottom;
    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 240s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 537px;
}
body.night .parallax{
display:none
}
body.night .user-tools .menu-new{
    font-size: 12px!important;
    background:#FF3355;
    color: #fff!important;
    position: absolute;
    right: 12px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 2px;
    margin-top: 2px;
    transform-origin:top top;
    transform: perspective(1px) scale(.74);
    font-style:inherit
}
body.night .write-thumb label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
background:#fff;
    color: rgba(26,26,26,.2);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    flex-flow: column;
}
body.night .po-post-in.b2-radius {
    background-color: #1e1e1e !important;
    color: #cccccc !important;
    border-color: #444 !important;
}
/* 夜间模式:管理员认证图标恢复原色 */
/* 夜间模式:管理员认证图标恢复红色 */
body.night .b2-vrenzhengguanli.b2font.b2-color {
    color: #ff3a55 !important;   /* 常用红色,可自行修改 */
    background-color: transparent !important;
}
/* 夜间模式:管理员认证图标加上白色底 */
body.night .b2-vrenzhengguanli.b2font.b2-color {
    background-color: #ffffff !important;
    border-radius: 50%;  /* 如果图标是圆形的话,加上圆角更自然 */
}

/*黑夜模式结束*/

/* ===== 昼夜切换按钮:最终版(无冲突,无 .opened) ===== */

/* 1. 基础样式:位置、毛玻璃、过渡动画(日间/夜间一致) */
#nightModeToggle {
    position: fixed !important;
    right: -14px !important;
    bottom: 150px !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-right: none !important;
    border-radius: 22px 0 0 22px !important;
    box-shadow: -2px 2px 12px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 10px !important;
    font-size: 18px !important;
    color: #555 !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.2) !important;
    user-select: none !important;
}

/* 2. 悬停或触摸时完全滑出 */
#nightModeToggle:hover {
    right: 0 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: #333 !important;
}

/* 3. 极端重要:夜间模式下强制保持原样(不变色、不变暗) */
body.night #nightModeToggle,
body.night #nightModeToggle:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-right: none !important;
    border-radius: 22px 0 0 22px !important;
    box-shadow: -2px 2px 12px rgba(0,0,0,0.15) !important;
    color: #555 !important;
    filter: none !important;      /* 解除夜间模式全局滤镜 */
    opacity: 1 !important;        /* 防止变透明 */
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.2) !important;
}

/* ===== 终极防闪烁:固定深色背景层(对付 Vue 动态渲染) ===== */
html.night body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1a1a1a !important;
    z-index: -1 !important;
    pointer-events: none !important;
}
/*防止闪白最终版*/
/* 1. 强制最外层容器变黑 */
body.night,
body.night #page {
    background-color: #1a1a1a !important;
}

/* 2. 强制内容区域变黑 */
body.night #content {
    background-color: #1a1a1a !important;
}

/* 3. 强制导航栏后的第一个元素(Vue 可能挂载在这里)变黑 */
body.night .site-header + #content {
    background-color: #1a1a1a !important;
}

/* 4. 圈友列表卡片强制深色 */
body.night .circle-users-item,
body.night .all-circles-item-list li > div {
    background-color: #2a2a2a !important;
}

/* 5. “加入时间”那一行强制深色 */
body.night p.circle-users-date {
    background-color: #2a2a2a !important;
}

/* 6. 所有通用圆角容器强制深色 */
body.night .b2-radius,
body.night .box {
    background-color: #1a1a1a !important;
}
/*防止闪白最终版*/

/* ==================== 夜间模式全局样式结束 ==================== 
/* ===== 修复登录弹窗文字颜色(日夜适配) ===== */
/* ===== 登录弹窗文字颜色:日夜完美适配 ===== */

/* ---------- 白天模式 ---------- */
/* 弹窗标题("未知の物语" 和 "登录") - 深色 */
#login-box .login-logo,
#login-box .login-title span {
    color: #333333 !important;
}

/* 输入框文字 - 深色,背景 - 白色 */
#login-box .login-form-item input {
    color: #333333 !important;
    background-color: #ffffff !important;
}

/* 底部链接(忘记密码/注册) - 主题蓝 */
#login-box .login-tk a {
    color: #0066ff !important;
}

/* ---------- 夜间模式 ---------- */
/* 弹窗标题 - 浅灰色(柔和,不刺眼) */
body.night #login-box .login-logo,
body.night #login-box .login-title span {
    color: #cccccc !important;
}

/* 输入框文字 - 浅灰色,背景 - 深灰色(护眼) */
body.night #login-box .login-form-item input {
    color: #cccccc !important;
    background-color: #2a2a2a !important;
}

/* 底部链接 - 浅蓝色(夜间适配) */
body.night #login-box .login-tk a {
    color: #6ea8fe !important;
}
/* ===== 修复受保护内容提示消息的文字颜色 ===== */

/* 1. 白天模式:文字为深色,链接为蓝色 */
.category-protection-message,
.category-protection-message p,
.category-protection-message span {
    color: #333333 !important;
}
.category-protection-message a {
    color: #0066ff !important;
}

/* 2. 夜间模式:文字为浅灰色,链接为浅蓝色 */
body.night .category-protection-message,
body.night .category-protection-message p,
body.night .category-protection-message span {
    color: #cccccc !important;
}
body.night .category-protection-message a {
    color: #6ea8fe !important;
}

光有这些代码还不够,还有不少地方颜色还是白色的呢

补充部分

黑夜模式js补充这段代码我是放在WPCodeSite Wide Footer里的

// ===== 专门针对 B2 主题选中按钮的强力修复 =====
(function() {
    // 核心函数:强制把 .picked 按钮的文字变成白色
    function fixButtonText() {
        // 1. 找到所有带有 picked 类的按钮
        document.querySelectorAll('button.picked').forEach(function(btn) {
            // 2. 用 JS 直接修改内联样式(优先级最高)
            btn.style.setProperty('color', '#ffffff', 'important');
            // 3. 如果按钮里有 span 包裹文字,也一起强制变白
            btn.querySelectorAll('span').forEach(function(span) {
                span.style.setProperty('color', '#ffffff', 'important');
            });
        });
    }

    // 4. 页面加载完成后立即执行一次
    if (document.readyState === 'complete') {
        fixButtonText();
    } else {
        document.addEventListener('DOMContentLoaded', fixButtonText);
    }

    // 5. B2 是 Vue 渲染,会动态替换 HTML。每 500 毫秒检查一次,防止被 Vue 恢复
    setInterval(fixButtonText, 500);
})();

 

补充的css这段代码我是放在WPCode里的Site Wide Header

这个地方花了我好多的时间所以不公开了

以上代码放在对应位置即可获得和我这个博客一样的夜间模式的效果了

给TA打赏
共{{data.count}}人
人已打赏
技术

使用Cloudflare Tunnel进行内网穿透

2026-6-15 5:25:59

技术

给WP的7B2主题增加文章目录功能

2026-6-15 15:10:44