// ==UserScript== // @name B站科技蓝黑主题 (完全体修复版) // @namespace https://scriptcat.org/ // @version 1.3 // @description 彻底覆盖B站顶栏、频道栏、播放器区域的白色背景，实现完美的科技蓝黑风格 // @author You // @match https://www.bilibili.com/* // @grant none // @run-at document-start // ==/UserScript== (function() { 'use strict'; const style = document.createElement('style'); style.innerHTML = ` /* ================= 科技蓝黑主题变量 ================= */ :root, html { --tech-bg-main: #070b14 !important; /* 深邃暗夜蓝黑 */ --tech-bg-card: #101726 !important; /* 卡片背景 */ --tech-blue: #00a1d6 !important; /* 亮科技蓝 */ --tech-blue-glow: rgba(0, 161, 214, 0.3) !important; --tech-text-main: #e0e6ed !important; /* 主文字 */ --tech-text-sub: #8a9bb8 !important; /* 次要文字 */ --tech-border: rgba(0, 161, 214, 0.15) !important; /* 科技感边框 */ } /* ================= 1. 全局背景强制深色化 ================= */ html, body, #app, #biliMainHeader, .bili-feed4, .main-container, .bili-header, .bili-header__bar, .bili-header__channel, .header-channel, .bili-channel, .channel-menu, .mini-header { background-color: var(--tech-bg-main) !important; background-image: none !important; /* 干掉B站可能设置的渐变背景 */ color: var(--tech-text-main) !important; } /* ================= 2. 顶栏与频道栏深色化 ================= */ .bili-header__bar, .mini-header, .bili-header__channel, .header-channel, .bili-channel, .channel-menu { background: rgba(7, 11, 20, 0.9) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--tech-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important; } /* 顶栏导航悬停 */ .nav-link-item, .bili-header .nav-link, .channel-link, .bili-channel__item, .channel-menu__item { color: var(--tech-text-main) !important; transition: all 0.2s; } .nav-link-item:hover, .bili-header .nav-link:hover, .channel-link:hover, .bili-channel__item:hover, .channel-menu__item:hover { color: var(--tech-blue) !important; text-shadow: 0 0 8px var(--tech-blue-glow) !important; background-color: transparent !important; } /* ================= 3. 播放器区域彻底黑化（修复截图2米白色块） ================= */ /* 强制播放器及其所有外层容器背景变黑 */ #bilibili-player, .bpx-player-container, .bpx-player-primary-area, .bpx-player-video-wrap, .bpx-player-video-area, .bpx-player-control-wrap, .bpx-player-control-bottom, .video-container, .player-wrap { background-color: #000000 !important; background-image: none !important; } /* 播放器底部控制栏文字颜色 */ .bpx-player-control-wrap *, .bpx-player-control-bottom * { color: var(--tech-text-main) !important; } /* 播放器标题栏 */ h1.video-title, .video-title, .video-info-title { color: var(--tech-text-main) !important; text-shadow: 0 0 10px rgba(0, 161, 214, 0.2) !important; } /* ================= 4. 搜索框与输入框 ================= */ .nav-search-input, .search-input, input { background-color: var(--tech-bg-card) !important; border: 1px solid var(--tech-border) !important; color: var(--tech-text-main) !important; } .nav-search-input:focus, .search-input:focus, input:focus { border-color: var(--tech-blue) !important; box-shadow: 0 0 12px var(--tech-blue-glow) !important; outline: none !important; } .search-button, .nav-search-btn { background: var(--tech-blue) !important; color: #fff !important; border: none !important; } /* ================= 5. 视频卡片修复（保留缩略图） ================= */ .bili-video-card__wrap, .video-card__wrap, .bili-dyn-item { background: var(--tech-bg-card) !important; border: 1px solid var(--tech-border) !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important; transition: all 0.3s ease !important; overflow: hidden !important; } .bili-video-card__wrap:hover, .video-card__wrap:hover { transform: translateY(-4px) !important; box-shadow: 0 0 20px var(--tech-blue-glow) !important; border-color: var(--tech-blue) !important; } /* 精准控制文字颜色 */ .bili-video-card__info--tit, .video-card__info .title { color: var(--tech-text-main) !important; } .bili-video-card__info--tit:hover, .video-card__info .title:hover { color: var(--tech-blue) !important; } .bili-video-card__stats, .video-card__info .meta, .up-name { color: var(--tech-text-sub) !important; } .bili-video-card__info, .video-card__info { background: transparent !important; } /* ================= 6. 右侧推荐与评论区 ================= */ .right-container, .video-page-special-card, .video-page-card { background-color: var(--tech-bg-card) !important; border: 1px solid var(--tech-border) !important; } .reply-item { background: var(--tech-bg-card) !important; border: 1px solid var(--tech-border) !important; border-radius: 8px !important; margin-bottom: 12px !important; padding: 12px !important; } .reply-content, .reply-item .content { color: var(--tech-text-main) !important; } .reply-item .user-name, .reply-item .name { color: var(--tech-blue) !important; } /* ================= 7. 修复之前下载脚本的白色悬浮框（融合进主题） ================= */ #bili-mini-dl-box { background: rgba(16, 23, 38, 0.95) !important; border: 1px solid var(--tech-border) !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important; color: var(--tech-text-main) !important; } #bili-mini-dl-box * { color: var(--tech-text-main) !important; } #bili-mini-dl-box a { color: var(--tech-blue) !important; text-decoration: underline !important; } #bili-mini-dl-box a:hover { text-shadow: 0 0 8px var(--tech-blue-glow) !important; } #bili-mini-dl-close { color: var(--tech-text-sub) !important; } /* ================= 8. 按钮与滚动条 ================= */ .vui_button--blue, .primary-btn, .login-btn, .vui_button--primary { background: var(--tech-blue) !important; border: none !important; color: #fff !important; box-shadow: 0 0 10px var(--tech-blue-glow) !important; } .vui_button--blue:hover, .primary-btn:hover, .login-btn:hover { box-shadow: 0 0 20px var(--tech-blue) !important; transform: scale(1.02); } ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #0055ff, var(--tech-blue)) !important; border-radius: 4px !important; } ::-webkit-scrollbar-track { background: var(--tech-bg-main) !important; } a, a:visited { color: var(--tech-text-main); } a:hover { color: var(--tech-blue) !important; } .split-line, hr { border-color: var(--tech-border) !important; } `; if (document.head) { document.head.appendChild(style); } else { document.documentElement.appendChild(style); } })();