☰

Return YouTube's Red Color

Revert YouTube's new pink color to the classic red

  1. // ==UserScript==
  2. // @name         Return YouTube's Red Color
  3. // @icon         https://www.youtube.com/favicon.ico
  4. // @version      1.0.4
  5. // @description  Revert YouTube's new pink color to the classic red
  6. // @author       dark110
  7. // @match        *://*.youtube.com/*
  8. // @grant        none
  9. // @license MIT
  10. // @namespace https://greasyfork.org/users/1404735
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const COLOR = '#FF0000';
  17.     const HUE_ROTATION = '20deg';
  18.     const ICON_URL = 'https://www.gstatic.com/youtube/img/creator/favicon/favicon.ico';
  19.  
  20.     const ToColor = [
  21.         '.html5-play-progress',
  22.         '.ytp-play-progress',
  23.         'div.ytp-scrubber-button.ytp-swatch-background-color',
  24.         'div.YtProgressBarLineProgressBarPlayed.YtProgressBarLineProgressBarPlayedRefresh',
  25.         'div.style-scope.ytd-thumbnail-overlay-resume-playback-renderer'
  26.     ];
  27.  
  28.     const ToFilter = [
  29.         '.ytp-large-play-button',
  30.         '.ytp-button',
  31.         '.ytcp-home-button',
  32.         '.yt-icon-shape',
  33.         'ytd-badge-supported-renderer',
  34.         '.badge-shape'
  35.     ];
  36.  
  37.     const Apply = () => {
  38.         ToColor.forEach(selector => {
  39.             document.querySelectorAll(selector).forEach(el => el.style.background = COLOR);
  40.         });
  41.  
  42.         ToFilter.forEach(selector => {
  43.             document.querySelectorAll(selector).forEach(el => el.style.filter = `hue-rotate(${HUE_ROTATION})`);
  44.         });
  45.  
  46.         const icon = document.querySelector("link[rel*='icon']");
  47.         if (icon) {
  48.             const newicon = document.createElement('link');
  49.             newicon.rel = 'shortcut icon';
  50.             newicon.href = ICON_URL;
  51.             document.head.replaceChild(newicon, icon);
  52.         }
  53.     };
  54.  
  55.     const ApplyObserver = new MutationObserver(Apply);
  56.     ApplyObserver.observe(document.body, {childList: true, subtree: true});
  57.  
  58.     Apply();
  59. })();