bili dark mode

dark mode of bilibili webpage

  1. // ==UserScript==
  2.  
  3. // ==Script==
  4. // @name bili dark mode
  5. // @description dark mode of bilibili webpage
  6. // @description B站暗黑模式
  7.  
  8. // ==Config==
  9. // @include *://www.bilibili.com/*
  10. // @include *://t.bilibili.com/*
  11. // @include *://space.bilibili.com/*
  12. // @connect www.bilibili.com
  13. // @license MIT
  14.  
  15. // ==Require==
  16.  
  17. // ==Author==
  18. // @author Sydowlle
  19. // @version 0.0.2
  20. // @namespace https://space.bilibili.com/346631924
  21.  
  22. // ==/UserScript==
  23.  
  24. var version = "0.0.2";
  25.  
  26. (
  27. function() {
  28.  
  29.  
  30. var style = document.createElement("style");
  31. style.type = "text/css";
  32.  
  33.  
  34. var scrollbar = document.createTextNode("html {scrollbar-face-color: #1d1f21}");
  35. style.appendChild(scrollbar);
  36.  
  37. // background image style
  38. var bg_Style = document.createTextNode(".bg,#app .bgc {background-image: none !important;}");
  39. style.appendChild(bg_Style);
  40.  
  41. // body color
  42. var bodyColor_Style = document.createTextNode("#app,.bili-feed4, body, #app .bgc {background-color: #131516 !important;}")
  43. style.appendChild(bodyColor_Style); // background
  44.  
  45. var block_Style = document.createTextNode(".n, .n .n-inner, .section, .col-1, .bili-comment.browser-pc,.channel-link,.bili-header__channel,.single-card.floor-card .floor-card-inner[data-v-7a866e94],.bili-video-card__wrap.__scale-wrap,.feed-card,.topic-panel,.bili-dyn-banner,.mini-header,.bili-dyn-item,.bili-dyn-live-users,.bili-dyn-publishing,.bili-rich-textarea__inner,.bili-dyn-up-list,.bili-dyn-list-tabs__list,.bili-dyn-my-info,.bili-header {background-color: #181a1b !important }")
  46. style.appendChild(block_Style); // block light black
  47.  
  48. var innerBlock_Style = document.createTextNode("#nav-searchform, .reply-tag-item,.reply-box.fixed-box[data-v-11f17fb2],.header-channel,.bili-rich-textarea__inner,.dyn-reserve__card,.reference .dyn-ugc__wrap,.dyn-additional-common__wrap,.bili-dyn-card-live__body,.bili-dyn-content__orig.reference,.dyn-goods__wrap,.bili-dyn-card-video__body {background-color: #1d1f21 !important;}")
  49. style.appendChild(innerBlock_Style);// inner block grey
  50.  
  51. var mainFont_Style = document.createTextNode(".name, .nav-title-text .desc-info-text, .hot-sort, .reply-content, #n-gz,#n-fs,#n-bf, .n-text, .n-num, .info-title, .goto-auth, .t, .section-title, .detail, .title, .video-page-card-small .card-box .info .title,.bili-comment.browser-pc,.video-info-v1 .title[data-v-7a866e94],.bili-video-card .bili-video-card__info--tit>a,.bili-rich-textarea__inner,.dyn-reserve__title.bili-ellipsis,.default-entry,.mini-header__title,.relevant-topic__title,.topic-panel__nav-title,.bili-dyn-banner__title,.dyn-ugc__detail__title.bili-ellipsis.multi-line,.mini-header .right-entry .right-entry__outside .right-entry-icon,.dyn-additional-common__detail__title,.bili-dyn-card-live__title.bili-ellipsis,.bili-dyn-card-video__title.bili-ellipsis,.bili-rich-text__content,.bili-dyn-my-info__content,.bili-dyn-my-info__stat__item__count,.bili-dyn-live-users__title,.bili-dyn-live-users__item__uname,.dyn-goods__one__detail__name.bili-ellipsis {color: #d3cfc9 !important}")
  52. style.appendChild(mainFont_Style); // white font
  53.  
  54. var pinkborder_Style = document.createTextNode(".reply-tag-item,.reference .dyn-ugc__wrap,.bili-dyn-card-video {border: 1px solid #fb7299 !important;}")
  55. style.appendChild(pinkborder_Style);
  56.  
  57. var noborder_Style = document.createTextNode(".section, .col-1, .channel-link {border: none !important;border-style: none !important;}")
  58. style.appendChild(noborder_Style);
  59.  
  60. var upNameNoMember_Style = document.createTextNode(".bili-dyn-title__text.bili-dyn-title__text.default {color: #d3cfc9 !important}")
  61. style.appendChild(upNameNoMember_Style);
  62.  
  63. var topreplyIcon = document.createTextNode(".reply-content-container .reply-content .top-icon{background-color: var(--brand_pink)!important;color:white !important}")
  64. style.appendChild(topreplyIcon);
  65.  
  66. var title = document.createTextNode(".video-title{color:white !important}")
  67. style.appendChild(title);
  68.  
  69. var transparentBackground = document.createTextNode(".be-textarea_inner, .list-create, .h-info .clearfix{background-color: rgba(0,0,0,0) !important}")
  70. style.appendChild(transparentBackground);
  71.  
  72.  
  73. var head = document.getElementsByTagName("head")[0];
  74. head.appendChild(style);
  75. }
  76. )();