Bilibili Auto Theme

Sync Bilibili theme_style cookie with system dark/light mode

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Bilibili Auto Theme
// @namespace    https://bilibili.com/
// @version      1.0.1
// @description  Sync Bilibili theme_style cookie with system dark/light mode
// @match        *://*.bilibili.com/*
// @run-at       document-start
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
  const COOKIE_KEY = "theme_style";
  const DARK_QUERY = "(prefers-color-scheme: dark)";

  const getCookie = (key) =>
    document.cookie.match(new RegExp(`(?:^|; )${key}=([^;]*)`))?.[1];

  const setThemeCookie = (theme) => {
    document.cookie = `${COOKIE_KEY}=${theme}; domain=.bilibili.com; path=/; max-age=31536000; secure`;
    console.log("[Theme Sync] Cookie updated:", theme);
  };

  const updateTheme = () => {
    const isDark = window.matchMedia(DARK_QUERY).matches;
    const systemTheme = isDark ? "dark" : "light";
    const currentTheme = getCookie(COOKIE_KEY);

    if (currentTheme !== systemTheme) {
      setThemeCookie(systemTheme);
      // recommended small delay to ensure cookie applied before reload
      setTimeout(() => window.location.reload(), 100);
    }
  };

  // Initial sync
  updateTheme();

  // Watch for system theme changes
  window.matchMedia(DARK_QUERY).addEventListener("change", updateTheme);
})();