Fix themes not covering entire page #3888

[TrivCodez]

Fixes #3888

Problem

Themes (especially custom themes) were not covering the entire YouTube page - they only covered the top bar/header area. The main content area remained the default YouTube theme/background.

Root Cause

The CSS selectors in themes.js were only applying theme colors to html[it-theme=custom] and html[it-theme=custom] [dark], but didn't explicitly target the main content containers:

• ytd-app - The root YouTube application container
• ytd-browse-view - Browse pages (Home, Subscriptions, etc.)
• ytd-watch-flexy - Watch pages
• #page and #content - Legacy content containers

Solution

Added an additional CSS rule that explicitly targets all major YouTube containers and ensures the background-color cascades properly through the page hierarchy:

'html[it-theme=custom] ytd-app, html[it-theme=custom] ytd-browse-view, html[it-theme=custom] ytd-watch-flexy, html[it-theme=custom] #page, html[it-theme=custom] #content { background-color: var(--yt-spec-base-background) !important; }'

Changes Made

• File Modified: js&css/web-accessible/www.youtube.com/themes.js
• Added explicit background-color rules for ytd-app, ytd-browse-view, ytd-watch-flexy, #page, and #content
• Ensures the theme's --yt-spec-base-background variable is applied consistently across all main content areas

Testing

The fix should be tested with:

1. Custom theme enabled with various color combinations
2. Different YouTube pages (home, watch, channel, playlists)
3. Different YouTube layouts (dark mode, light mode)
4. Both browser and desktop YouTube interfaces

Impact

This fix ensures that when users select a theme (particularly custom themes), the entire page adopts the theme colors instead of just the top bar, providing a consistent and immersive viewing experience.