☰

bilibili-dark-theme-ng

b站深色模式

  1. // ==UserScript==
  2. // @name        bilibili-dark-theme-ng
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://www.bilibili.com/*
  5. // @match       https://t.bilibili.com/*
  6. // @match       https://search.bilibili.com/*
  7. // @match       https://space.bilibili.com/*
  8. // @match       https://message.bilibili.com/*
  9. // @run-at      document-idle
  10. // @grant       GM_addStyle
  11. // @version     1.0.0
  12. // @author      slimer10
  13. // @license     MIT
  14. // @description b站深色模式
  15. // ==/UserScript==
  16.  
  17. GM_addStyle(`
  18.   :root {
  19.     color-scheme: dark;
  20.  
  21.     --Lb5: #00bbff !important;
  22.     --Wh0: #0f0f0f !important;
  23.     --Ga0: #222222 !important;
  24.     --Ga0_s: #222222 !important;
  25.     --Ga1: #282828 !important;
  26.     --Ga1_s: #222222 !important;
  27.     --Ga2: #484848 !important;
  28.     --Ga7: #a4a4a4 !important;
  29.     --Ga10: #d1d1d1 !important;
  30.     --Ga11: #222222 !important;
  31.     --Ga12: #4a4a4a !important;
  32.     --Ga13_s: #5a5a5a !important;
  33.  
  34.     /*UP觉得很赞修复 & tag圆形化*/
  35.     .tag {
  36.       color: var(--Ga1) !important;
  37.       background-color: var(--Ga1_s) !important;
  38.       border-radius: 180px !important;
  39.     }
  40.  
  41.     .tag:hover {
  42.       color: var(--Ga2) !important;
  43.       background-color: var(--Ga1_s) !important;
  44.       border-radius: 180px !important;
  45.     }
  46.  
  47.     /* 回复框 */
  48.     .reply-box-warp {
  49.       border: 1px solid #626262 !important;
  50.     }
  51.  
  52.     /* 弹幕输入框 */
  53.     .bpx-player-video-inputbar-wrap {
  54.       background: #333333;
  55.     }
  56.  
  57.     /* 颜色调整 */
  58.     .bpx-player-container {
  59.       -webkit-box-shadow: 0 0 8px var(--Ga0);
  60.       box-shadow: 0 0 8px var(--Wh0) !important;
  61.       height: 100%;
  62.       position: relative;
  63.       width: 100%;
  64.     }
  65.  
  66.  
  67.     /* 标题栏阴影 */
  68.     .mini-header {
  69.       box-shadow: none;
  70.       border-bottom: 1px solid #484848;
  71.       background-color:var(--Wh0) !important;
  72.     }
  73.  
  74.     /* 总是去除背景图 */
  75.     body {
  76.     background: none !important; /* 移除背景图 */
  77.     background-color: #000000 !important; /* 设置纯色背景 */
  78.     }
  79.  
  80.     /* 总是抑制加载动画 */
  81.     .card {
  82.       background-color: var(--Ga0) !important;
  83.       border-color: 1px solid var(--Ga0) !important;
  84.     }
  85.     .link-progress-tv {
  86.       background-color:var(--Ga0) !important;
  87.     }
  88.  
  89.     /*修正小卡片*/
  90.     .bili-video-card__info--icon-text {
  91.       background-color: var(--Ga1) !important;
  92.       padding: 0 6px;
  93.     }
  94.  
  95.     .bili-video-card__info--rcmd-text {
  96.       background-color: var(--Ga10) !important;
  97.       color: var(--Ga1) !important;
  98.       padding: 0 6px;
  99.     }
  100.  
  101.     .bili-header .slide-down {
  102.       background: var(--Wh0);
  103.     }
  104.  
  105.     /*修改恶心的边框*/
  106.     .bili-header .header-avatar-wrap .header-avatar-wrap--container .bili-avatar {
  107.       border: 1px solid #ccc;
  108.     }
  109.  
  110.     .bili-header .mini-avatar--small .header-entry-mini {
  111. 	    border: 1px solid #ccc;
  112.     }
  113.  
  114.     /*搜索*/
  115.     .vui_button--tab:active, .vui_button--tab.vui_button--active {
  116.       color: var(--Ga10);
  117.       background-color: var(--Ga1);
  118.       border: none;
  119.     }
  120.  
  121.     #nav-searchform{
  122.       border-radius: 180px !important;
  123.     }
  124.  
  125.     .bili-header .center-search-container .center-search__bar .nav-search-content {
  126.       border-radius: 180px !important;
  127.       padding: 0 16px !important;
  128.     }
  129.  
  130.     .bili-header .search-panel {
  131.       border: 1px solid var(--line_regular) !important;
  132.       border-top: 1px solid var(--line_regular) !important;
  133.       border-radius: 8px !important;
  134.       padding: 13px 0 0px !important;
  135.       transform: fade(100%);
  136.       transition: all .5s ease-in;
  137.     }
  138.  
  139.     .user-info-wrapper {
  140.       background-color:var(--Wh0) !important;
  141.       color: var(--Ga10) !important;
  142.     }
  143.  
  144.     /*反馈框修复*/
  145.     .feedback-module .entry {
  146.       background-color:var(--Wh0) !important;
  147.       color: var(--Ga10) !important;
  148.     }
  149.  
  150.     .feedback-module .entry:hover {
  151.       background-color:var(--Lb5) !important;
  152.       color: var(--Ga1) !important;
  153.     }
  154.  
  155.     .reason {
  156.       background-color:var(--Wh0) !important;
  157.       color: var(--Ga10) !important;
  158.     }
  159.  
  160.     .reason:hover {
  161.       background-color:var(--Lb5) !important;
  162.       color: var(--Ga1) !important;
  163.     }
  164.  
  165.  
  166.     /*拜托，弹幕显示只要一次啦*/
  167.     .bpx-player-video-info-divide {
  168.       display: none !important;
  169.     }
  170.     .bpx-player-video-info-dm {
  171.       display: none !important;
  172.     }
  173.  
  174.     /*去除大会员标志，粉色名字已经够了*/
  175.     .layer-res {
  176.       display: none !important;
  177.     }
  178.  
  179.     /*发现音乐*/
  180.     #musicApp {
  181.       background-color: var(--Wh0);
  182.     }
  183.   }
  184. `);
  185.  
  186. /*搜索结果防止弹出新窗口*/
  187. if (
  188. location.href.startsWith("https://search.bilibili.com/")
  189. ) {
  190.   function fixLinks() {
  191.       document.querySelectorAll('a[target="_blank"]').forEach(link => {
  192.           link.removeAttribute('target');
  193.       });
  194.   }
  195.  
  196.   fixLinks();
  197.  
  198.   new MutationObserver(fixLinks).observe(document.body, {
  199.       childList: true,
  200.       subtree: true
  201.   });
  202. }
  203.  
  204. /* 动态 */
  205. if (
  206.   location.href.startsWith("https://www.bilibili.com/opus/") ||
  207.   location.href.startsWith("https://t.bilibili.com/")
  208. ) {
  209.   // 移除背景图片
  210.   const bg = document.querySelector(".bg");
  211.   if (bg) {
  212.     bg.remove();
  213.   }
  214.  
  215.   GM_addStyle(`
  216.     :root {
  217.       --Wh0: #333333 !important;
  218.       --Ga0: #484848 !important;
  219.     }
  220.      /* 全局背景颜色 */
  221.      * {
  222.        background-color: transparent !important;
  223.      }
  224.  
  225.     /* 背景遮罩 */
  226.     .bgc {
  227.       background-color: var(--Ga1) !important;
  228.     }
  229.  
  230.     /* 动态UP名字 */
  231.     .bili-dyn-up-list__item__name {
  232.       color: var(--Ga5) !important;
  233.     }
  234.  
  235.     /* 推荐视频商品卡片 */
  236.     .bili-dyn-card-ugc__wrap,
  237.     .bili-dyn-card-goods__wrap {
  238.       background-color: var(--Ga1) !important;
  239.     }
  240.   `);
  241. }
  242.  
  243. /* 个人空间 */
  244. if (location.href.startsWith("https://space.bilibili.com/"))  {
  245.   GM_addStyle(`
  246.     :root {
  247.       --Wh0: #242424 !important;
  248.       --Ga0: #333333 !important;
  249.  
  250.       html,body {
  251.         background-color: var(--Ga1) !important;
  252.         border: 1px solid var(--Ga1) !important;
  253.       }
  254.       .element.style {
  255.         color:var(--Ga0) !important;
  256.       }
  257.     }
  258.  
  259.      /* 全局背景颜色 */
  260.      * {
  261.        background-color: transparent !important;
  262.      }
  263.     /* 顶部背景 */
  264.     .h-space-header {
  265.       background-color: var(--Ga0) !important;
  266.     }
  267.  
  268.     /* 用户信息卡片 */
  269.     .h-user-card {
  270.       background-color: var(--Ga1) !important;
  271.     }
  272.  
  273.     /* 动态列表背景 */
  274.     .bili-dyn-list {
  275.       background-color: var(--Ga1) !important;
  276.     }
  277.  
  278.     /* 动态卡片样式 */
  279.     .bili-dyn-card {
  280.       background-color: var(--Ga1) !important;
  281.       border: 1px solid #333333 !important;
  282.     }
  283.  
  284.     /* 去除头图 */
  285.     .h-inner {
  286.       background-image: none !important; /* 移除背景图 */
  287.       background-color: #242424 !important; /* 设置纯色背景 */
  288.       .space-theme-trigger.icon {
  289.         background-image: none !important; /* 移除背景图 */
  290.         background-color: #242424 !important; /* 设置纯色背景 */
  291.       }
  292.     }
  293.     .n .n-inner {
  294.       background: var(--Ga0) !important;
  295.       box-shadow: 0 0 0 1px #242424 !important;
  296.     }
  297.     .n .n-text{
  298.       color: var(--Ga0) !important;
  299.     }
  300.     .wrapper.clearfix::before {
  301.       display:none;
  302.     }
  303.     .col-1 {
  304.       background: var(--Ga0) !important;
  305.       border: 1px solid var(--Ga0) !important;
  306.       .i-pin-v.be-tab {
  307.         border-bottom: 1px solid var(--Ga0) !important;
  308.       }
  309.       .clearfix:after{
  310.         display:none;
  311.       }
  312.       .section{
  313.         border-bottom: 1px solid var(--Ga0) !important;
  314.       }
  315.       .section-title {
  316.         color: var(--Ga7) !important;
  317.       }
  318.       .title {
  319.         color: var(--Ga7) !important;
  320.       }
  321.       .section.fav {
  322.         .section-title{
  323.           color: var(--Ga7) !important;
  324.         }
  325.         .fav-covers {
  326.           border: 1px solid var(--Ga0) !important;
  327.         }
  328.         .name {
  329.           color: var(--Ga7) !important;
  330.         }
  331.       }
  332.       .section.bangumi {
  333.         .desc {
  334.           color: var(--Ga8) !important;
  335.         }
  336.       }
  337.       .section.bangumi.section-title {
  338.         color: var(--Ga7) !important;
  339.         .b-img {
  340.           background: var(--Ga0) !important;
  341.         }
  342.       }
  343.       .channel-item {
  344.         border-bottom: 1px solid var(--Ga0) !important;
  345.       }
  346.     }
  347.     .col-2 {
  348.       background: var(--Ga0) !important;
  349.       .section{
  350.         background: var(--Ga0) !important;
  351.         border: 1px solid var(--Ga0) !important;
  352.       }
  353.       .elec.elec-action {
  354.         display: none !important;
  355.       }
  356.       .i-m-r2 {
  357.         border: 1px solid var(--Ga0) !important;
  358.       }
  359.       .section-title {
  360.         border-bottom: 1px solid var(--Ga0) !important;
  361.       }
  362.     }
  363.   `);
  364. }
  365.  
  366. /* 消息中心 */
  367. if (location.href.startsWith("https://message.bilibili.com/")) {
  368.   GM_addStyle(`
  369.     :root {
  370.       --Wh0: #242424 !important;
  371.       --Ga0: #333333 !important;
  372.       border: 1px solid var(--Ga0) !important;
  373.     }
  374.  
  375.   // 移除背景图片
  376.   const bg = document.querySelector(".background");
  377.   if (bg) {
  378.     bg.remove();
  379.   }
  380.      /* 全局背景颜色 */
  381.      * {
  382.        background-color: transparent !important;
  383.      }
  384.     /* 消息 */
  385.     .space-right{
  386.       background-color: var(--Ga0) !important;
  387.       border: 1px solid var(--Ga0) !important;
  388.     }
  389.     .space-right-top{
  390.       background-color: var(--Ga0) !important;
  391.       .title{
  392.         background-color: var(--Ga0) !important;
  393.       }
  394.     }
  395.     .space-right-bottom.ps {
  396.       background-color: var(--Ga0) !important;
  397.      }
  398.  
  399.      /* 我的消息 */
  400.      .bili-im {
  401.        background-color: var(--Ga0) !important;
  402.        .title {
  403.        border-bottom: 1px solid var(--Ga0) !important;
  404.        }
  405.      }
  406.      .router-view {
  407.        background-color: var(--Ga0) !important;
  408.        border: 1px solid var(--Ga0) !important;
  409.        .left {
  410.         .list-container.ps {
  411.           background-color: var(--Ga0) !important;
  412.           .list-item.active {
  413.             background-color: var(--Ga2) !important;
  414.           }
  415.         }
  416.         border-right: border: 1px solid var(--Ga10) !important;
  417.        }
  418.        .right {
  419.          .message-list{
  420.            background-color: var(--Ga0) !important;
  421.            .msg-notify {
  422.              background-color: var(--Ga12) !important;
  423.              .title{
  424.                color:var(--Ga7) !important;
  425.              }
  426.              .content{
  427.                color:var(--Ga7) !important;
  428.              }
  429.              .detail {
  430.                color:var(--Ga10) !important;
  431.              }
  432.              .link {
  433.                color:var(--Ga10) !important;
  434.              }
  435.            }
  436.            .message-content{
  437.              background-color:var(--Ga12) !important;
  438.              color: var(--Ga7) !important;
  439.            }
  440.          }
  441.        }
  442.      }
  443.  
  444.      /* 回复我的 */
  445.     .card.reply-card {
  446.       background-color: var(--Ga0) !important;
  447.       .divider {
  448.         border-bottom: 1px solid var(--Ga0) !important;
  449.       }
  450.      }
  451.      .name-field {
  452.       color: var(--Ga5) !important;
  453.      }
  454.      .real-reply {
  455.       color: var(--Ga7) !important;
  456.      }
  457.  
  458.      /* @ 我的 */
  459.      .divided-line {
  460.        border-top-color: var(--Ga1) !important;
  461. }
  462.      .card.at-card {
  463.        background-color: var(--Ga0) !important;
  464.        .at-item::after {
  465.          border-bottom: 1px solid var(--Ga0) !important;
  466.        }
  467.                     }
  468.      .name-field {
  469.        color: var(--Ga5) !important;
  470.      }
  471.      .real-at {
  472.        color: var(--Ga7) !important;
  473.      }
  474.  
  475.      /* 收到的赞 */
  476.      .card.love-card {
  477.        background-color: var(--Ga0) !important;
  478.       .love-item::after {
  479.         border-bottom: 1px solid var(--Ga0) !important;
  480.       }
  481.      }
  482.      .name-field {
  483.        color: var(--Ga5) !important;
  484.      }
  485.      .desc-field.like-item {
  486.        color: var(--Ga7) !important;
  487.      }
  488.      .love-detail {
  489.        background-color: var(--Ga0) !important;
  490.        .card.detail{
  491.          background-color: var(--Ga0) !important;
  492.          .text.content.active{
  493.            color: var(--Ga5) !important
  494.          }
  495.        }
  496.        .card.like-list{
  497.          background-color: var(--Ga0) !important;
  498.          .liked-user {
  499.            .follow-btn.active{
  500.              background-color: var(--Ga0) !important;
  501.              border-top-color: var(--Lb5) !important;
  502.              border-left-color: var(--Lb5) !important;
  503.              border-right-color: var(--Lb5) !important;
  504.              border-bottom-color: var(--Lb5) !important;
  505.            }
  506.          }
  507.          .liked-user::after {
  508.          border-bottom: 1px solid var(--Ga0) !important;
  509.          }
  510.         }
  511.      }
  512.  
  513.     /* 消息列表 */
  514.     .space-left {
  515.       background-color: var(--Ga0) !important;
  516.       border: 1px solid #333333 !important;
  517.     }
  518.  
  519.     /* 消息列表背景 */
  520.     .sidebar {
  521.       background-color: var(--Ga0) !important;
  522.     }
  523.  
  524.     /* 消息头部背景 */
  525.     .space-right-top {
  526.       background-color: var(--Ga0) !important;
  527.       border: 1px solid var(--Ga0) !important;
  528.     }
  529.  
  530.     /* 系统通知 */
  531.     .card.system-item.im-fade-in-enter-to{
  532.       .title {
  533.         color:var(--Ga7) !important;
  534.       }
  535.     }
  536.     .card.system-item{
  537.       .title {
  538.         color:var(--Ga7) !important;
  539.       }
  540.     }
  541.     /* 消息设置 */
  542.     .config {
  543.       background-color: var(--Ga0) !important;
  544.       .text {
  545.         color: var(--Ga7) !important;
  546.         .tip {
  547.           color: var(--Ga12) !important;
  548.         }
  549.       }
  550.       .config-item::before {
  551.         background: var(--Ga0) !important;
  552.         color: var(--Ga7) !important;
  553.       }
  554.       .radio-selector {
  555.         color: var(--Ga7) !important;
  556.       }
  557.     }
  558.   `);
  559. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址