Auto Dark Mode for AniList Submission Manual

Automatically switch the theme between light and dark, based on the browser’s color scheme preference.

目前为 2024-02-16 提交的版本。查看最新版本。

Wrap lines

// ==UserScript==
// @name               Auto Dark Mode for AniList Submission Manual
// @name:zh-TW         AniList 投稿指引自動黑暗模式
// @description        Automatically switch the theme between light and dark, based on the browser’s color scheme preference.
// @description:zh-TW  基於瀏覽器的佈景主題設定，自動從明亮和黑暗模式間切換。
// @icon               https://icons.duckduckgo.com/ip3/submission-manual.anilist.co.ico
// @author             Jason Kwok
// @namespace          https://jasonhk.dev/
// @version            1.0.1
// @license            MIT
// @match              https://submission-manual.anilist.co/*
// @run-at             document-end
// @inject-into        page
// @grant              none
// @supportURL         https://greasyfork.org/scripts/459664/feedback
// ==/UserScript==

const query = matchMedia("(prefers-color-scheme: dark)");

query.addEventListener("change", updateTheme);

function isDarkTheme()
{
    return document.body.classList.contains("dark");
}

function updateTheme({ matches: isDarkMode })
{
    if (isDarkTheme() !== isDarkMode) { toggle(); }
}

// A patch to the otiginal `addDarkModeButton` to update the theme after the toggle was added.
const ogAddDarkModeButton = window.addDarkModeButton;
window.addDarkModeButton = function addDarkModeButton(device)
{
    ogAddDarkModeButton(device);
    updateTheme(query);
};