Zero-lag background with organized settings block
// ==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 });
})();