☰

Change Background Color for All Sites (dark red)

Change background color while preserving other styles

  1. // ==UserScript==
  2. // @name         Change Background Color for All Sites (dark red)
  3. // @namespace    https://greasyfork.org/en/users/1200587-trilla-g
  4. // @version      1.6
  5. // @description  Change background color while preserving other styles
  6. // @author       Trilla_G
  7. // @match        *://*/*
  8. // @grant        GM_addStyle
  9. // @license       MIT
  10. // ==/UserScript==
  11.  
  12. GM_addStyle(`
  13.   /* General background elements */
  14.   body, html, #content, main, .main-container, .page-wrapper, .site-wrapper,
  15.   .content-wrapper, .app-root, [class*="background"] {
  16.       background-color: #943022 !important;
  17.     
  18.   }
  19.  
  20.   /* Ensure text and foreground colors are not overridden */
  21.   * {
  22.       background-color: transparent !important;
  23.   }
  24.  
  25.   /* Restore background for pop-up elements */
  26.   .popup, .popover, .modal, .tooltip, .menu, .dropdown, .overlay,
  27.   .dialog, .floating-menu, .context-menu, [role="dialog"], [role="menu"],
  28.   [role="tooltip"], [role="alert"], [aria-modal="true"] {
  29.       background-color: #643022 !important; /* Darker red to match theme */
  30.       color: inherit !important;
  31.   }
  32.  
  33.   /* YouTube-specific backgrounds */
  34.   ytd-app, ytd-page-manager {
  35.       background-color: #943022 !important;
  36.   }
  37.  
  38.   /* Rumble backgrounds */
  39.   .app, .wrapper, .main-content {
  40.       background-color: #943022 !important;
  41.   }
  42.  
  43.   /* Kick backgrounds */
  44.   .kick-app-root, .video-player-page, .page-content {
  45.       background-color: #943022 !important;
  46.   }
  47.  
  48.   /* Twitch navigation, sidebar, and headers */
  49.   .tw-root, .tw-sidebar, .side-nav__content, .top-nav__menu, .chat-room,
  50.   .channel-page__container, [data-a-target="side-nav-bar"], .tw-transition-group,
  51.   .side-nav__scrollable_content {
  52.       background-color: #943022 !important;
  53.   }
  54.  
  55.   /* ChatGPT background fix */
  56.   .chatgpt-app, .flex.flex-col.items-center, #__next {
  57.       background-color: #943022 !important;
  58.   }
  59.  
  60.   /* X (formerly Twitter) background and containers */
  61.   [data-testid="primaryColumn"], [data-testid="secondaryColumn"],
  62.   header[role="banner"], div[aria-label="Timeline: Home"],
  63.   [role="main"] {
  64.       background-color: #943022 !important;
  65.   }
  66.  
  67.   /* Remove semi-transparent overlays */
  68.   [style*="rgba"], [style*="opacity"] {
  69.       background: none !important;
  70.       opacity: 1 !important;
  71.   }
  72. `);
  73.