Auto Dark Scrollbar

Apply dark scrollbar for dark pages

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==UserScript==
// @name               Auto Dark Scrollbar
// @name:zh-CN         自动深色滚动条
// @namespace          http://tampermonkey.net/
// @version            0.7
// @description        Apply dark scrollbar for dark pages
// @description:zh-CN  对深色页面自动应用深色滚动条
// @author             TGSAN
// @match              *://*/*
// @grant              none
// ==/UserScript==

(function() {
    'use strict';

    function parseColor(color) {
        var x = document.createElement('div');
        document.body.appendChild(x);
        var rgba;
        var red = 0, green = 0, blue = 0, alpha = 0;
        try {
            x.style = 'color: ' + color + '!important';
            color = window.getComputedStyle(x).color;
            rgba = color.match(/rgba?\((.*)\)/)[1].split(',').map(Number);
            red = rgba[0];
            green = rgba[1];
            blue = rgba[2];
            alpha = '3' in rgba ? rgba[3] : 1;
        }
        catch (e) { }
        x.parentNode.removeChild(x);
        return { 'red': red, 'green': green, 'blue': blue, 'alpha': alpha };
    }

    function updateStyle() {
        let bodyColor = parseColor(window.getComputedStyle(document.body, null)['background-color']);
        let globalElementColor = parseColor(window.getComputedStyle(document.documentElement, null)['background-color']);
        let bodyColorIsLight = (bodyColor.alpha == 0 || (((bodyColor.red + bodyColor.green + bodyColor.blue) / 3) >= 128));
        let globalElementColorIsLight = (globalElementColor.alpha == 0 || (((globalElementColor.red + globalElementColor.green + globalElementColor.blue) / 3) >= 128));
        let htmlTheme = window.document.querySelector("html").getAttribute("data-theme");
        let htmlThemeIsLight = (htmlTheme == null || htmlTheme == "light");
        let isLight = bodyColorIsLight && globalElementColorIsLight && htmlThemeIsLight;
        // 添加样式(通用)
        if (isLight) {
            style.innerText = ":root { color-scheme: light !important; }";
        } else {
            style.innerText = ":root { color-scheme: dark !important; }";
        }
    }

    let style = document.createElement("style");
    document.head.appendChild(style);
    style.type = "text/css";
    document.addEventListener("load", function() {
        updateStyle();
    });
    window.addEventListener("load", function() {
        updateStyle();
    });
    document.body.addEventListener("load", function() {
        updateStyle();
    });
    updateStyle();
    setInterval(updateStyle, 1000);
})();