☰

Use Old YouTube Color Palette

Change the new YouTube color palette to the old color palette.

当前为 2024-10-25 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Use Old YouTube Color Palette
// @namespace    http://tampermonkey.net/
// @version      2024-10-25
// @description  Change the new YouTube color palette to the old color palette.
// @author       Tanuki
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @license      MIT
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // Define the CSS rule to inject
    const TANMOD_CSS = `
        *[fill="#FF0033"] {
            fill: #FE0000 !important;
        }
        #endpoint > tp-yt-paper-item > yt-icon.guide-entry-badge.style-scope.ytd-guide-entry-renderer > span > div {
            color: #FE0000 !important;
            fill: #FE0000 !important;
        }
        #button > yt-icon-badge-shape > div > div.yt-spec-icon-badge-shape__badge {
            color: #f1f1f1 !important;
            background-color: #FE0000 !important;
        }
        #movie_player > div.ytp-chrome-bottom > div.ytp-progress-bar-container > div.ytp-progress-bar > div.ytp-timed-markers-container {
            background-color: #FE0000 !important;
        }
    `;

    // Function to add global CSS by creating a <style> tag
    function addGlobalStyle(css) {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.classList.add('tanuki-mod-style'); // Unique class for easy checking
        style.textContent = css;
        document.head.appendChild(style);
        console.log("CSS has been successfully injected!");
    }

    // Inject CSS initially
    addGlobalStyle(TANMOD_CSS);

    // Use MutationObserver to re-inject CSS on DOM changes
    const observer = new MutationObserver(() => {
        if (!document.querySelector('.tanuki-mod-style')) {
            addGlobalStyle(TANMOD_CSS); // Reapply if removed
        }
    });

    // Observe changes in the entire document body
    observer.observe(document.body, { childList: true, subtree: true });

})();