YouTube Ultra-Optimized Background + Text Colors

Zero-lag background with organized settings block
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         YouTube Ultra-Optimized Background + Text Colors
// @namespace    https://youtube.com/
// @version      3.21
// @license MIT
// @description  Zero-lag background with organized settings block
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    /* =============================================
       🎨 CUSTOMIZATION SETTINGS
       ============================================= */

    const SETTINGS = {
        backgroundImage: "https://images.pexels.com/photos/4737484/pexels-photo-4737484.jpeg",
        text: "#ffffff",
        secondary: "#cccccc",
        link: "#00b3ff",
        description: "#f5f5f5",
        comment: "#e8e8e8"
    };

    /* =============================================
       🚀 BACKGROUND LAYER (lag-free external layer)
       ============================================= */

    function injectBackgroundLayer() {
        if (document.getElementById("yt-custom-bg")) return;

        const bg = document.createElement("div");
        bg.id = "yt-custom-bg";
        Object.assign(bg.style, {
            position: "fixed",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            zIndex: "-999999",
            pointerEvents: "none",
            background: `url("${SETTINGS.backgroundImage}") center center / cover no-repeat`,
        });

        document.body.appendChild(bg);
    }

    /* =============================================
       🎨 TEXT COLOR CSS (optimized selectors)
       ============================================= */

    function injectCSS() {
        if (document.getElementById("yt-custom-style")) return;

        const style = document.createElement("style");
        style.id = "yt-custom-style";

        style.textContent = `
        /* Transparent YouTube layers so BG shows through */
        html, body, ytd-app, #content, #page-manager, #primary {
            background: transparent !important;
        }

        /* Main text */
        yt-formatted-string,
        #content-text,
        #description {
            color: ${SETTINGS.text} !important;
        }

        /* Secondary text */
        #metadata-line span {
            color: ${SETTINGS.secondary} !important;
        }

        /* Links */
        a, ytd-channel-name a {
            color: ${SETTINGS.link} !important;
        }

        /* Description */
        #description,
        yt-formatted-string#description {
            color: ${SETTINGS.description} !important;
        }

        /* Comments */
        #comments #content-text {
            color: ${SETTINGS.comment} !important;
        }
        `;

        document.head.appendChild(style);
    }

    /* Initial Load */
    injectBackgroundLayer();
    injectCSS();

    /* Polymer-safe reinjection */
    const observer = new MutationObserver(() => {
        injectBackgroundLayer();
        injectCSS();
    });

    observer.observe(document.documentElement, { childList: true, subtree: true });

})();