☰

Use Old YouTube Color Palette

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

  1. // ==UserScript==
  2. // @name         Use Old YouTube Color Palette
  3. // @namespace    https://greasyfork.org/en/scripts/513941-use-old-youtube-color-palette
  4. // @version      1.3
  5. // @description  Change the new YouTube color palette to the old color palette.
  6. // @author       Tanuki
  7. // @match        https://www.youtube.com/*
  8. // @icon         https://www.youtube.com/s/desktop/8fa11322/img/favicon_144x144.png
  9. // @grant        none
  10. // @license      MIT
  11. // @run-at       document-end
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Favicon url
  18.     const FAVICON_URL = "https://www.youtube.com/s/desktop/8fa11322/img/favicon_144x144.png";
  19.     // Define the CSS rule to inject
  20.     const TANMOD_CSS = `
  21.         *[fill="#FF0033"] {
  22.             fill: #FE0000 !important;
  23.         }
  24.         #endpoint > tp-yt-paper-item > yt-icon.guide-entry-badge.style-scope.ytd-guide-entry-renderer > span > div {
  25.             color: #FE0000 !important;
  26.             fill: #FE0000 !important;
  27.         }
  28.         #button > yt-icon-badge-shape > div > div.yt-spec-icon-badge-shape__badge {
  29.             color: #f1f1f1 !important;
  30.             background-color: #FE0000 !important;
  31.         }
  32.         #scrubber > desktop-shorts-player-controls > div > yt-progress-bar > div > div > yt-progress-bar-playhead > div,
  33.         #scrubber > desktop-shorts-player-controls > div > yt-progress-bar > div > div > yt-progress-bar-line > div > div.YtProgressBarLineProgressBarPlayed.YtProgressBarLineProgressBarPlayedRefresh {
  34.             background: #FE0000 !important;
  35.         }
  36.         .html5-play-progress,
  37.         .ytp-play-progress,
  38.         .html5-scrubber-button,
  39.         .ytp-scrubber-button {
  40.             background: #FE0000 !important;
  41.         }
  42.     }
  43.     `;
  44.  
  45.     function changeFavicon(new_favicon_url) {
  46.         // Select the first favicon link element, if available.
  47.         const favicon = document.querySelector("link[rel='shortcut icon']");
  48.         // Collect all link elements with either 'shortcut icon' or 'icon' in their rel attribute.
  49.         [favicon, ...document.querySelectorAll("link[rel='icon']")].forEach(favicon => {
  50.             favicon.remove(); // Remove each icon element to avoid duplicates.
  51.         })
  52.  
  53.         // Clone Favicon Node
  54.         const newFavicon = favicon.cloneNode();
  55.         newFavicon.href = new_favicon_url;
  56.         // Append the updated favicon to the document head.
  57.         document.head.appendChild(newFavicon);
  58.     }
  59.  
  60.     // Function to add global CSS by creating a <style> tag
  61.     function addGlobalStyle(css) {
  62.         const style = document.createElement('style');
  63.         style.type = 'text/css';
  64.         style.classList.add('tanuki-mod-style'); // Unique class for easy checking
  65.         style.textContent = css;
  66.         document.head.appendChild(style);
  67.         console.log("CSS has been successfully injected!");
  68.     }
  69.  
  70.     // Inject Favicon initially
  71.     changeFavicon(FAVICON_URL);
  72.     // Inject CSS initially
  73.     addGlobalStyle(TANMOD_CSS);
  74.  
  75.     // Use MutationObserver to re-inject CSS on DOM changes
  76.     const observer = new MutationObserver(() => {
  77.         if (!document.querySelector('.tanuki-mod-style')) {
  78.             addGlobalStyle(TANMOD_CSS); // Reapply if removed
  79.         }
  80.     });
  81.  
  82.     // Observe changes in the entire document body
  83.     observer.observe(document.body, { childList: true, subtree: true });
  84.  
  85. })();