☰

YouTube - Revert old colors style script

This reverts back to the colors before the web_darker_dark_theme flag was enabled.

  1. // ==UserScript==
  2. // @name         YouTube - Revert old colors style script
  3. // @version      2024.08.12
  4. // @description  This reverts back to the colors before the web_darker_dark_theme flag was enabled.
  5. // @author       Magma_Craft
  6. // @icon         https://www.youtube.com/favicon.ico
  7. // @namespace    https://greasyfork.org/en/users/933798
  8. // @license      MIT
  9. // @match        https://*.youtube.com/*
  10. // @grant        none
  11. // @run-at       document-start
  12. // ==/UserScript==
  13.  
  14. // Attributes to remove from <html>
  15. const ATTRS = [
  16.     "darker-dark-theme",
  17.     "darker-dark-theme-deprecate"
  18. ];
  19.  
  20. // Regular config keys.
  21. const CONFIGS = {
  22. };
  23.  
  24. // Experiment flags.
  25. const EXPFLAGS = {
  26.     // Disable both 'darker_dark_theme' and 'amsterdam_playlists' (both have been patched since May and Nov '23)
  27.     web_darker_dark_theme: false,
  28.     web_amsterdam_playlists: false,
  29.     // Disable the refresh on theme change (this have been patched since Apr '23)
  30.     kevlar_refresh_on_theme_change: false,
  31.     // Remove the ambient mode if you are on both dark theme (and theater mode)
  32.     kevlar_watch_cinematics: false
  33. };
  34.  
  35. // Player flags
  36. // !!! USE STRINGS FOR VALUES !!!
  37. // For example: "true" instead of true
  38. const PLYRFLAGS = {
  39. };
  40.  
  41. class YTP {
  42.     static observer = new MutationObserver(this.onNewScript);
  43.  
  44.     static _config = {};
  45.  
  46.     static isObject(item) {
  47.         return (item && typeof item === "object" && !Array.isArray(item));
  48.     }
  49.     
  50.     static mergeDeep(target, ...sources) {
  51.         if (!sources.length) return target;
  52.         const source = sources.shift();
  53.     
  54.         if (this.isObject(target) && this.isObject(source)) {
  55.             for (const key in source) {
  56.                 if (this.isObject(source[key])) {
  57.                     if (!target[key]) Object.assign(target, { [key]: {} });
  58.                     this.mergeDeep(target[key], source[key]);
  59.                 } else {
  60.                     Object.assign(target, { [key]: source[key] });
  61.                 }
  62.             }
  63.         }
  64.     
  65.         return this.mergeDeep(target, ...sources);
  66.     }
  67.     
  68.  
  69.     static onNewScript(mutations) {
  70.         for (var mut of mutations) {
  71.             for (var node of mut.addedNodes) {
  72.                 YTP.bruteforce();
  73.             }
  74.         }
  75.     }
  76.  
  77.     static start() {
  78.         this.observer.observe(document, {childList: true, subtree: true});
  79.     }
  80.     
  81.     static stop() {
  82.         this.observer.disconnect();
  83.     }
  84.  
  85.     static bruteforce() {
  86.         if (!window.yt) return;
  87.         if (!window.yt.config_) return;
  88.  
  89.         this.mergeDeep(window.yt.config_, this._config);
  90.     }
  91.  
  92.     static setCfg(name, value) {
  93.         this._config[name] = value;
  94.     }
  95.  
  96.     static setCfgMulti(configs) {
  97.         this.mergeDeep(this._config, configs);
  98.     }
  99.  
  100.     static setExp(name, value) {
  101.         if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};
  102.  
  103.         this._config.EXPERIMENT_FLAGS[name] = value;
  104.     }
  105.  
  106.     static setExpMulti(exps) {
  107.         if (!("EXPERIMENT_FLAGS" in this._config)) this._config.EXPERIMENT_FLAGS = {};
  108.  
  109.         this.mergeDeep(this._config.EXPERIMENT_FLAGS, exps);
  110.     }
  111.  
  112.     static decodePlyrFlags(flags) {
  113.         var obj = {},
  114.             dflags = flags.split("&");
  115.  
  116.         for (var i = 0; i < dflags.length; i++) {
  117.             var dflag = dflags[i].split("=");
  118.             obj[dflag[0]] = dflag[1];
  119.         }
  120.         
  121.         return obj;
  122.     }
  123.  
  124.     static encodePlyrFlags(flags) {
  125.         var keys = Object.keys(flags),
  126.             response = "";
  127.  
  128.         for (var i = 0; i < keys.length; i++) {
  129.             if (i > 0) {
  130.                 response += "&";
  131.             }
  132.             response += keys[i] + "=" + flags[keys[i]];
  133.         }
  134.  
  135.         return response;
  136.     }
  137.  
  138.     static setPlyrFlags(flags) {
  139.         if (!window.yt) return;
  140.         if (!window.yt.config_) return;
  141.         if (!window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS) return;
  142.         var conCfgs = window.yt.config_.WEB_PLAYER_CONTEXT_CONFIGS;
  143.         if (!("WEB_PLAYER_CONTEXT_CONFIGS" in this._config)) this._config.WEB_PLAYER_CONTEXT_CONFIGS = {};
  144.  
  145.         for (var cfg in conCfgs) {
  146.             var dflags = this.decodePlyrFlags(conCfgs[cfg].serializedExperimentFlags);
  147.             this.mergeDeep(dflags, flags);
  148.             this._config.WEB_PLAYER_CONTEXT_CONFIGS[cfg] = {
  149.                 serializedExperimentFlags: this.encodePlyrFlags(dflags)
  150.             }
  151.         }
  152.     }
  153. }
  154.  
  155. window.addEventListener("yt-page-data-updated", function tmp() {
  156.     YTP.stop();
  157.     for (i = 0; i < ATTRS.length; i++) {
  158.         document.getElementsByTagName("html")[0].removeAttribute(ATTRS[i]);
  159.     }
  160.     window.removeEventListener("yt-page-date-updated", tmp);  
  161. });
  162.  
  163. YTP.start();
  164.  
  165. YTP.setCfgMulti(CONFIGS);
  166. YTP.setExpMulti(EXPFLAGS);
  167.  
  168. (function() {
  169. let css = `
  170. html[dark] { --yt-spec-general-background-a: #181818 !important; --yt-spec-general-background-b: #0f0f0f !important; --yt-spec-brand-background-primary: rgba(33, 33, 33, 0.98) !important; --yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1) !important }
  171. html:not([dark]) { --yt-spec-general-background-a: #f9f9f9 !important; --yt-spec-general-background-b: #f1f1f1 !important; --yt-spec-brand-background-primary: rgba(255, 255, 255, 0.98) !important; --yt-spec-10-percent-layer: rgba(0, 0, 0, 0.1) !important }
  172.  
  173. /* Removes ambient mode if dark theme was enabled */
  174. #cinematics.ytd-watch-flexy { display: none !important }
  175.  
  176. /* Button improvements (including edit and sponsor buttons) */
  177. #voice-search-button.ytd-masthead { background-color: var(--yt-spec-general-background-a) !important; margin-left: 4px !important }
  178. #edit-buttons > ytd-button-renderer > yt-button-shape > a { color: var(--yt-spec-text-primary-inverse) !important; background-color: var(--yt-spec-call-to-action) !important }
  179. div#sponsor-button.style-scope.ytd-video-owner-renderer > ytd-button-renderer.style-scope.ytd-video-owner-renderer > yt-button-shape > .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline { background-color: var(--yt-spec-badge-chip-background) !important; border: none !important; color: var(--yt-spec-text-primary) !important }
  180. div#sponsor-button.style-scope.ytd-c4-tabbed-header-renderer > ytd-button-renderer.style-scope.ytd-c4-tabbed-header-renderer > yt-button-shape > .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline { background-color: var(--yt-spec-badge-chip-background) !important; border: none !important; color: var(--yt-spec-text-primary) !important }
  181. button.yt-spec-button-shape-next.yt-spec-button-shape-next--outline.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m[aria-label="Join this channel"] { background-color: var(--yt-spec-badge-chip-background) !important; border: none !important; color: var(--yt-spec-text-primary) !important }
  182.  
  183. /* Apply the old colored theme */
  184. ytd-masthead { background: var(--yt-spec-brand-background-solid) !important }
  185. ytd-app { background: var(--yt-spec-general-background-a) !important }
  186. ytd-browse[page-subtype="channels"] { background: var(--yt-spec-general-background-b) !important }
  187. ytd-c4-tabbed-header-renderer { --yt-lightsource-section1-color: var(--yt-spec-general-background-a) !important }
  188. ytd-mini-guide-renderer, ytd-mini-guide-entry-renderer { background-color: var(--yt-spec-brand-background-solid) !important }
  189. #tabs-divider.ytd-c4-tabbed-header-renderer { border-bottom: 0px !important }
  190. #header.ytd-rich-grid-renderer { width: 100% !important }
  191. [page-subtype="home"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { background-color: var(--yt-spec-brand-background-primary) !important; border-top: 1px solid var(--yt-spec-10-percent-layer) !important; border-bottom: 1px solid var(--yt-spec-10-percent-layer) !important }
  192. ytd-feed-filter-chip-bar-renderer[is-dark-theme] #left-arrow.ytd-feed-filter-chip-bar-renderer::after { background: linear-gradient(to right, var(--yt-spec-brand-background-primary) 20%, rgba(33, 33, 33, 0) 80%) !important }
  193. ytd-feed-filter-chip-bar-renderer[is-dark-theme] #right-arrow.ytd-feed-filter-chip-bar-renderer::before { background: linear-gradient(to left, var(--yt-spec-brand-background-primary) 20%, rgba(33, 33, 33, 0) 80%) !important }
  194. ytd-feed-filter-chip-bar-renderer #left-arrow-button.ytd-feed-filter-chip-bar-renderer, ytd-feed-filter-chip-bar-renderer #right-arrow-button.ytd-feed-filter-chip-bar-renderer { background-color: var(--yt-spec-brand-background-primary) !important }
  195. yt-chip-cloud-renderer[is-dark-theme] #right-arrow.yt-chip-cloud-renderer::before { background: linear-gradient(to left, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(24, 24, 24, 0) 90%) !important; }
  196. yt-chip-cloud-renderer #left-arrow-button.yt-chip-cloud-renderer, yt-chip-cloud-renderer #right-arrow-button.yt-chip-cloud-renderer { background: var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) !important }
  197. yt-chip-cloud-renderer[is-dark-theme] #left-arrow.yt-chip-cloud-renderer::after { background: linear-gradient(to right, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(24, 24, 24, 0) 90%) !important }
  198. yt-chip-cloud-renderer #left-arrow.yt-chip-cloud-renderer::after { background: linear-gradient(to right, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(249, 249, 249, 0) 90%) !important }
  199. yt-chip-cloud-renderer #right-arrow.yt-chip-cloud-renderer::before { background: linear-gradient(to left, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(249, 249, 249, 0) 90%) !important }
  200. ytd-feed-filter-chip-bar-renderer[component-style="FEED_FILTER_CHIP_BAR_STYLE_TYPE_HASHTAG_LANDING_PAGE"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer, ytd-feed-filter-chip-bar-renderer[component-style="FEED_FILTER_CHIP_BAR_STYLE_TYPE_CHANNEL_PAGE_GRID"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { background-color: var(--yt-spec-general-background-b) !important }
  201. ytd-watch-flexy #left-arrow.ytd-feed-filter-chip-bar-renderer:after { background: linear-gradient(to right, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(249, 249, 249, 0) 90%) !important; }
  202. ytd-watch-flexy #right-arrow.ytd-feed-filter-chip-bar-renderer:before { background: linear-gradient(to left, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(249, 249, 249, 0) 90%) !important; }
  203. ytd-watch-flexy ytd-feed-filter-chip-bar-renderer[is-dark-theme] #left-arrow.ytd-feed-filter-chip-bar-renderer:after { background: linear-gradient(to right, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(24, 24, 24, 0) 90%) !important; }
  204. ytd-watch-flexy ytd-feed-filter-chip-bar-renderer[is-dark-theme] #right-arrow.ytd-feed-filter-chip-bar-renderer:before { background: linear-gradient(to left, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(24, 24, 24, 0) 90%) !important; }
  205. #guide-content.ytd-app { background: var(--yt-spec-brand-background-solid) !important }
  206. [page-subtype="history"] #page-header.ytd-tabbed-page-header { background-color: var(--yt-spec-general-background-a) !important; padding-top: 0 !important; padding-bottom: 0 !important }
  207. .page-header-view-model-wiz__page-header-title--page-header-title-large { margin-top: 24px !important; margin-bottom: 8px !important; color: var(--yt-spec-text-primary) !important; font-size: 1.6em !important; line-height: 1.4em !important; font-weight: 500 !important }
  208.  
  209. /* Revert non-amsterdam playlists UI */
  210. ytd-c4-tabbed-header-renderer[use-page-header-style] .page-header-banner.ytd-c4-tabbed-header-renderer { border-radius: 0px !important }
  211. ytd-browse[darker-dark-theme][page-subtype="playlist"], ytd-browse[darker-dark-theme][page-subtype="show"] { background-color: var(--yt-spec-general-background-b) !important; padding-top: 0 !important }
  212. ytd-two-column-browse-results-renderer.ytd-browse[background-refresh] { background-color: var(--yt-spec-general-background-b) !important }
  213. .yt-sans-20.yt-dynamic-sizing-formatted-string, .yt-sans-22.yt-dynamic-sizing-formatted-string, .yt-sans-24.yt-dynamic-sizing-formatted-string, .yt-sans-28.yt-dynamic-sizing-formatted-string, yt-text-input-form-field-renderer[component-style="INLINE_FORM_STYLE_TITLE"][amsterdam] tp-yt-paper-input.yt-text-input-form-field-renderer .input-content.tp-yt-paper-input-container > input { font-family: "Roboto", "Arial", sans-serif !important; font-size: 2.4rem !important; line-height: 3.2rem !important; font-weight: 400 !important }
  214. ytd-browse[page-subtype=playlist][amsterdam] { padding-top: 0 !important }
  215. ytd-browse[page-subtype=playlist] ytd-playlist-header-renderer.ytd-browse, ytd-browse[page-subtype=playlist] .page-header-sidebar.ytd-browse, ytd-browse[has-page-header-sidebar] ytd-playlist-header-renderer.ytd-browse, ytd-browse[has-page-header-sidebar] .page-header-sidebar.ytd-browse { margin-left: 0 !important; height: calc(100vh - var(--ytd-toolbar-height)) !important }
  216. .immersive-header-container.ytd-playlist-header-renderer { margin-bottom: 0 !important; border-radius: 0 !important }
  217. .image-wrapper.ytd-hero-playlist-thumbnail-renderer { border-radius: 0 !important }
  218. ytd-playlist-header-renderer, yt-formatted-string[has-link-only_]:not([force-default-style]) a.yt-simple-endpoint.yt-formatted-string:visited, .metadata-stats.ytd-playlist-byline-renderer, .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--text, ytd-text-inline-expander.ytd-playlist-header-renderer { color: var(--yt-spec-text-primary) !important; --ytd-text-inline-expander-button-color: var(--yt-spec-text-primary) !important }
  219. ytd-dropdown-renderer[no-underline] tp-yt-paper-dropdown-menu-light .tp-yt-paper-dropdown-menu-light[style-target=input], tp-yt-iron-icon.tp-yt-paper-dropdown-menu-light { color: var(--yt-spec-text-primary) !important }
  220. .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal, .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled { background: transparent !important; color: var(--yt-spec-text-primary) !important; border-radius: 2px !important; text-transform: uppercase }
  221. .metadata-text-wrapper.ytd-playlist-header-renderer { --yt-endpoint-color: var(--yt-spec-text-primary) !important; --yt-endpoint-hover-color: var(--yt-spec-text-primary) !important }
  222. div.immersive-header-background-wrapper.style-scope.ytd-playlist-header-renderer > div { background: var(--yt-spec-general-background-a) !important }
  223. #contents > ytd-playlist-video-list-renderer { background: var(--yt-spec-general-background-b) !important; margin-right: 0px !important }
  224. ytd-browse[page-subtype=playlist] ytd-two-column-browse-results-renderer.ytd-browse, ytd-browse[has-page-header-sidebar] ytd-two-column-browse-results-renderer.ytd-browse, ytd-browse[page-subtype=playlist][amsterdam] #alerts.ytd-browse { padding-left: 360px !important; padding-right: 0px !important; margin-bottom: 0 !important }
  225. ytd-alert-with-button-renderer[type=INFO], ytd-alert-with-button-renderer[type=SUCCESS] { background: var(--yt-spec-general-background-a) !important }
  226. ytd-item-section-renderer.style-scope.ytd-section-list-renderer[page-subtype="playlist"] > #header.ytd-item-section-renderer > ytd-feed-filter-chip-bar-renderer { display: none !important }
  227. .yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal { background: var(--yt-spec-base-background) }
  228. iron-input.tp-yt-paper-input > input.tp-yt-paper-input, textarea.tp-yt-iron-autogrow-textarea { color: var(--yt-spec-text-primary) !important }
  229. #labelAndInputContainer.tp-yt-paper-input-container > label, #labelAndInputContainer.tp-yt-paper-input-container > .paper-input-label { color: var(--yt-spec-text-secondary) }
  230. .unfocused-line.tp-yt-paper-input-container, .focused-line.tp-yt-paper-input-container { border-bottom-color: var(--yt-spec-text-primary) !important }`;
  231. if (typeof GM_addStyle !== "undefined") {
  232.   GM_addStyle(css);
  233. } else {
  234.   let styleNode = document.createElement("style");
  235.   styleNode.appendChild(document.createTextNode(css));
  236.   (document.querySelector("head") || document.documentElement).appendChild(styleNode);
  237. }
  238. })();