Bilibili dark theme

Enable dark theme for Bilibili
换行
// ==UserScript==
// @name        Bilibili dark theme
// @namespace   Hill98
// @description Enable dark theme for Bilibili
// @version     1.0.3
// @author      Hill-98
// @license     MIT
// @icon        https://www.bilibili.com/favicon.ico
// @homepageURL https://github.com/Hill-98/userscripts
// @supportURL  https://github.com/Hill-98/userscripts/issues
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_registerMenuCommand
// @match       https://www.bilibili.com/
// @match       https://www.bilibili.com/opus/*
// @match       https://www.bilibili.com/video/*
// @match       https://live.bilibili.com/*
// @match       https://search.bilibili.com/*
// @match       https://t.bilibili.com/*
// @run-at      document-start
// ==/UserScript==

// Force Enable: window.darkThemeForceEnable = true

const addStyle = function addStyle(forceEnable) {
  const id = 'bilibili-dark-theme';
  const style = document.createElement('style');
  style.id = id;
  style.innerHTML = /*css*/`
@import url("https://s1.hdslb.com/bfs/static/jinkela/long/laputa-css/dark.css") ${forceEnable ? '' : '(prefers-color-scheme: dark)'};

@media ${forceEnable ? '' : '(prefers-color-scheme: dark)'} {
  #app .bg {
    background-image: none;
  }

  #app .bgc {
    background-color: var(--graph_bg_regular);
  }

  .bili-dyn-card-goods .bili-dyn-card-goods__wrap, .reference .bili-dyn-card-goods__wrap,
  .bili-dyn-card-link-common__wrap, .reference .bili-dyn-card-link-common__wrap,
  .bili-dyn-card-reserve .bili-dyn-card-reserve__card, .reference .bili-dyn-card-reserve__card,
  .bili-dyn-card-ugc .bili-dyn-card-ugc__wrap, .reference .bili-dyn-card-ugc__wrap,
  .bili-dyn-upower-lottery__card, .reference .bili-dyn-upower-lottery__card {
    background-color: var(--graph_bg_thin);
  }

  .reply-tag-item {
    background-color: var(--bg3) !important;
    color: var(--text2) !important;
  }
}
`;
  document.getElementById(id)?.remove();
  document.body.append(style);
};

Object.defineProperty(unsafeWindow, 'darkThemeForceEnable', {
  enumerable: true,
  get() {
    return GM_getValue('force-enable', false);
  },
  set(value) {
    const v = Boolean(value);
    GM_setValue('force-enable', v);
    addStyle(v);
  },
});

document.querySelector('html').style.display = 'none';
document.addEventListener('DOMContentLoaded', () => {
  addStyle(unsafeWindow.darkThemeForceEnable);
  document.querySelector('html').style.display = '';
});

GM_registerMenuCommand('Switch Force Enable', () => {
  unsafeWindow.darkThemeForceEnable = !unsafeWindow.darkThemeForceEnable;
});
欢迎访问Greasy Fork镜像
