fix(youtube): support color-version v2_0 redesign#2266
Open
KenanSalar wants to merge 32 commits into
Open
Conversation
YouTube replaced the --yt-spec-* variables with --yt-sys-color-baseline-- and --yt-deprecated-, and now paints a lot of surfaces from per-build hashed vars that those variables can't reach anymore. Mapped the full new token set to the palette and added class-level overrides for the surfaces that went hashed (page background, masthead, search box, chips, menus/popups).
The black bars beside a non-16:9 video in theater/fullscreen weren't themed. Depending on whether ambient mode is on they come from either the player itself or the full-bleed container behind it, so this colors the whole stack to match the page. The #page-manager prefix outranks YouTube's own forced player background, and it's skipped when the "black bars" option is on.
- Theme the slide-in guide overlay drawer on watch pages / narrow viewports: set the --app-drawer-content-container-background-color token and force the hashed-var #guide-content surface to @base, so the overlay matches the docked homepage guide. - Recolor the white inner glyph of the Premium/Music/Kids product logos in the guide to @crust, so they read like the masthead logo (accent badge + dark glyph). Scoped to guide entries, leaving the monochrome nav icons untouched.
The color-version v2_0 popups paint their surfaces from per-build hashed atomic vars, so the semantic-token overrides never reached them and they stayed on YouTube's default grays: - var(--t08a7c6c176cbc5c2) = #282828 — the masthead overflow / account / notifications menus (ytd-multi-page-menu-renderer) and their sticky panel header (ytd-simple-menu-header-renderer, a separate element). - var(--t518e925f61bdcb91) = #212121 — the menu caret tip and the form / backstage-post creation dialogs (host + inner renderer). Add these stable renderer selectors to the existing popup override block so they fill from @Mantle like the already-covered ytd-menu-popup-renderer. Color-only; YT's rules aren't !important, so the !important override wins.
Continue the color-version v2_0 fix with color-only overrides on stable selectors for surfaces that paint from per-build hashed atomic vars: - Buttons: add the camelCase .ytSpecButtonShapeNext* block (Share/Save/ Join/Subscribe/like/dislike) mirroring the legacy kebab rules. - Menu: set --ytd-menu-renderer-button-color so 3-dot triggers recolor. - Watch page: title + metadata, description prose and "...more" toggle, info line, and channel lockup. - Engagement panels: transcript (both impls), AI video summary, chapter list, panel and section headers. - Comments: author handle, body, timestamp, placeholder, and the channel subscriber count.
Replace v2_0 translucent-white hashed atomic vars on the description area with solid Catppuccin surfaces: - Force #description.ytd-watch-metadata to @surface0 - Force ytd-expandable-metadata-renderer (AI-summary card) to @Surface1 - Step social-link highlight pills down to @Surface1 (was @surface2) - Align collapsed-card header and expand chevron hover to @surface2
…sidebar On color-version=v2_0 the masthead paints from a single full-width #frosted-glass layer (search row + chip bar) over a backdrop blur, while the row containers and the docked guide stay transparent. - Tint the frosted-glass tokens and legacy --yt(-spec)-frosted-glass-* vars to fade(@base, 80%) so the blur survives instead of being flattened by a solid fill. - Force the masthead row containers transparent and paint only the #frosted-glass / #background.ytd-masthead layer; re-tint the blurred scrolled / without-chipbar states with translucent @base. - Keep #start transparent and leave the docked guide ([persistent]) transparent so the chip-bar frost stays continuous over the sidebar instead of being cut off by a solid panel; scope the solid @base drawer surface to the overlay drawer (:not([persistent])) only. - Theme the engagement-panel card surfaces (#header/#subheader/#content) to @surface0.
Default YouTube paints the masthead chips and the search/voice buttons with a translucent wash so the frosted glass shows through them; our theme forced them to solid fills, which read as flat opaque surfaces on the frost. - Inactive category chips → translucent fade(@text, 10%) (was solid @surface0); the active chip stays opaque @accent. - Search button and the 'Search with your voice' button → fade(@text, 8%); the voice button previously kept YouTube's hardcoded white wash, so re-tint it to the same flavor-aware value. The search input box stays opaque @Mantle. - Masthead mono/tonal pill buttons (Create, etc.) → fade(@text, 10%) + hover, scoped to #masthead so watch-page Share/Save/Join buttons keep solid @surface0.
Add color-only overrides on stable selectors for surfaces the v2_0
redesign paints from per-build hashed atomic vars (which the semantic
token remap can't reach):
- guide toggle ("hamburger") yt-icon -> @text and the YouTube wordmark
svg fill -> @white (its glyphs lack a fill attribute so the global
[fill="white"] rule misses them)
- sidebar/mini-guide entry labels, section headers, icons and chevrons
-> @text; active-page row and hover highlight -> @surface0
- guide footer link rows -> @subtext0, copyright -> @overlay1, and the
signed-out promo message -> @text
…try code Color-only overrides on stable selectors for surfaces that paint from per-build hashed atomic vars, which the semantic token remap can't reach: - Chapter timestamp pill connector (#items::before) -> @Surface1 - Comment vote count -> @subtext0, brightened to @text when liked (new + legacy renderers) - Translate button and comment-filter context banner -> @subtext0 - Comment continuation threadline -> @Surface1 resting / @overlay0 hover - Logo country-code superscript -> @subtext0
…panel Retarget --reel-metadata-color to the flavor-aware @white on ytd-reel-video-renderer so the in-player channel handle and video title follow the over-media text convention instead of a hashed #f1f1f1. Theme the shorts player overlay controls: the v2_0 camelCase class rename broke the legacy .yt-spec-button-shape-next--overlay-dark rule, leaving the play button with a hardcoded rgba(0,0,0,0.3) scrim mismatched against the themed volume scrim. Match play and the CC/3-dot/maximize pill to fade(@black, 60%) and keep every glyph @white, in line with the normal-video player controls.
Recolor the Shorts ⋮ (more options) menu surfaces the existing rules missed: the trailing selection value (.ytListItemViewModelSelectionText) to @subtext0, and the legacy Ambient-mode row's label/icon (ytd-toggle-menu-service-item-renderer) to @text since they paint a hashed atomic var instead of the usual list-item title class. Also recolor the legacy paper-toggle switch (tp-yt-paper-toggle-button) that the .ytSwitchShape* rules don't reach: track @surface2 / knob @overlay2 when off, both @accent when on.
Map the comments sort dropdown (yt-dropdown-menu) onto the palette: the listbox surface to @Mantle, item titles to @text, subtitles to @subtext0, the selected row to @surface0 and hovered rows to @Surface1. Color the sort-button trigger icon @text and the anchored/floating comments header @surface0 so the panel reads as one surface. Theme secondary comment text painting hashed atomic vars: the "Pinned by @…" badge, the Read more/Show less expander, and the comment count by the engagement-panel title to @subtext0.
The center play button (shown when autoplay is off / video cued) has a classless path[fill="#fff"] triangle that was inheriting the light @white fill, washing out against the accent-tinted button. Recolor it to dark @crust like the masthead logo so it reads in both the translucent (idle) and opaque (hover) states. Color-only; @Version untouched.
The 2026 color-version=v2_0 channel/profile page paints many surfaces and text from per-build hashed atomic vars (and the new --yt-lightsource-* token family), which the existing token remap couldn't reach, leaving the default #0f0f0f/#f1f1f1/#aaa instead of the palette. Add color-only, stable-selector overrides: - Channel header: remap --yt-lightsource-* (headline/tabs bg, title, secondary text) and force the hashed-var #page-header-container / #tabs-container backgrounds to @base so the whole header blends in. - Channel empty state: title/description #f1f1f1 -> @text. - Channel-tab search: magnifier icon, and the expanded field's typed text (@text), label (@subtext0), resting underline (@subtext0) and focused underline (@accent). - 'Sort by' dropdown trigger label (#icon-label) -> @text. - Notifications bell glyph -> @text; popup header/section/message text -> @text, timestamps -> @subtext0, row hover -> @surface0. - Legacy context-menu items (ytd-menu-service-item-renderer): label/icon -> @text, hover -> @surface0. - About '...more' dialog: wrapper --paper-dialog-background-color -> @surface0 (seamless card) and #about-container body text -> @text. - Posts tab: 'Connect with your Community' banner text/surface, post composer fields, image-attach prompts, char counter, Published/ Scheduled/Archived sub-tabs + the active-tab indicator line, and the empty-state title/subtitle/icon + its circle.
The masthead avatar menu (ytd-multi-page-menu-renderer) painted all its text from the #f1f1f1 hashed atomic var, bypassing the semantic tokens: the identity header (name/handle/email), every compact-link row label and its leading icon, and the theme-toggle row — with subtitles/secondary values reading their own hashed vars (#secondary-text even fell back to the light-mode #0f0f0f, near-black on the dark popup). Force the stable renderer selectors to @text, muted trailing values to @subtext0, and re-tint the translucent-white row hover to a solid @surface0. Also re-tint the masthead icon-button hover wash (the notification bell and yt-icon-button siblings), a hardcoded rgba(255,255,255,.2), to the flavor-aware fade(@text,20%) the Create pill already uses. Exclude the :last-of-type topbar-menu-button-renderer so the account avatar keeps YT's deliberately hover-less treatment instead of an !important-induced oval.
…shelf logo On the watch-history page several v2_0 surfaces still painted from per-build hashed atomic vars (#f1f1f1 / #aaa) that the semantic-token remap can't reach, so they stayed unthemed. Force the palette on stable selectors (color-only): - Search watch history field (ytd-search-box-renderer paper-input): text -> text, label -> subtext0, resting underline -> subtext0, focused underline -> accent. - Comments / Posts / Live chat links (#label.ytd-compact-link-renderer): -> text. - "Today" date dividers and "Shorts" shelf titles (#title.ytd-item-section-header-renderer, #title.ytd-reel-shelf-renderer): -> text. - Shorts shelf logo inner play glyph (#icon.ytd-reel-shelf-renderer white fills): -> crust, matching the masthead logo and Premium/Music/Kids guide logos.
The playlist queue beside the player (ytd-playlist-panel-renderer) painted
several surfaces from per-build hashed atomic vars the semantic-token remap
can't reach. Force the palette on stable selectors (color-only):
- List body (.playlist-items) and header band (.header): #0f0f0f / #212121 -> base.
- Playlist title, video titles (h4 / #video-title) and the collapse/close
icon (#trailing-icon): #f1f1f1 -> text.
- Owner + index message (#publisher-container, .index-message), channel byline
(#byline), and the index number / drag-reorder handle shown on hover
(#index, #index-container, #reorder): #aaa -> subtext0.
Also extend the legacy context-menu rule to the sibling renderer types in the
video overflow popup whose labels lack the .title class, so their label + icon
+ hover get themed like the rest: ytd-menu-navigation-item-renderer ("Save to
playlist") and ytd-menu-service-item-download-renderer ("Download").
Two more watch-page surfaces painted from per-build hashed atomic vars the semantic-token remap can't reach. Force the palette on stable selectors (color-only): - Miniplayer (ytd-miniplayer): the floating card body + info strip between the video and the queue (.ytdMiniplayerComponentContent / .ytdMiniplayerInfoBarHost) #212121 -> base; the video title (.ytdMiniplayerInfoBarTitle) #f1f1f1 -> text; the playlist subtitle + "1 / 21" count (.ytdMiniplayerInfoBarSubtitle) #aaa -> subtext0. The card keeps its drop shadow over the page. - Video description hashtags / endpoint links (#description a.yt-simple-endpoint): #aaa -> accent. They read --yt-endpoint-color (unset) and fall back to the hashed var instead of the call-to-action token, so scope to the description and theme them as links.
…show-more expander
Color-only structural overrides for v2_0 surfaces that paint from per-build
hashed atomic vars the token remap can't reach:
- Rich-grid shelf cards (Live Now / Recent Live Streams): title -> text,
byline + watching count -> subtext0
- Multi-creator bylines (#attributed-channel-name, e.g. "iBlali and VIK"):
names + inline verified-check icons -> subtext0
- Top live games cards + shelf subtitle ("Based on your Subscriptions...")
- Game/topic interactive tabbed-header: title/metadata, tab labels (incl.
hover) + selection bar, and the #tabs-inner-container black bar -> base
- "My region" sort/filter dropdown; "Top chat" view selector (chat-scoped)
- Hero/carousel LIVE badge (.ytBadgeShapeLive) -> accent badge + base glyph
- Watch-page sponsored panel ad: card surface -> base, option cards ->
surface0, text -> text/subtext0
- In-player ad overlay info (Sponsored / pod index / advertiser link) ->
flavor-aware white
- Like button's Lottie thumbs-up (baked fill=rgb(255,255,255)) -> text
Default metadata badges (.ytBadgeShapeDefault — genre/platform tags such as "Video game", "Windows", "PlayStation 5" on game/topic headers) were painted an opaque @Surface1, losing YouTube's translucent look. Use fade(@surface2, 60%) so they stay see-through. Color-only; the blur (backdrop-filter) is left to YT.
…faces Add color-only structural overrides for surfaces that v2_0 paints from per-build hashed atomic vars or hardcoded literals (unreachable via the semantic-token remap): - Show grid cards (ytd-grid-show-renderer): title -> @text, byline -> @subtext0; stacked-thumbnail season overlay -> fade(@crust, 80%) bg + @white text/icon. - Community/backstage posts (ytd-backstage-post-renderer): author + body -> @text, @mentions/links -> @accent, timestamp + Read more/Show less -> @subtext0; video attachment bg -> @base, title -> @text, byline / metadata / description -> @subtext0. - Learning page: View full course CTA -> @accent, topic subtitle (ytd-rich-shelf-renderer) -> @subtext0. - Sports carousel: hero description inline-styled spans -> fade(@white, 70%).
WalkQuackBack
added
0.kind: bug
…aces - search results: video titles + metadata and the artist/channel card (name, @handle, songs, albums) - search filters dialog: surface → @Mantle, title/headers/close → @text, options → @subtext0, selected → @accent - live-chat welcome-message logo: white play glyph → @crust - members-only comments notice: card → @surface0, message text → @text
Author
|
pushed the final fixes, should be good to review now whenever someone has time |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🗒 Checklist 🗒
🔧 What does this fix? 🔧
YouTube's color-version="v2_0" redesign removed the
--yt-spec-*variables the theme relied on and replaced them with two new sets (--yt-sys-color-baseline-*and--yt-deprecated-*). That left a lot of the UI sitting on default greys: the masthead and search, the watch page, Shorts, comments, channel pages and most of the feed shelves.I remapped the new variables onto the Catppuccin palette and added fallbacks for the surfaces that don't read from those variables (they paint from inline per-build values instead) like the search box and chips, Shorts overlays, popups and dialogs, the guide drawer and the scrollbars. The old
--yt-spec-*block is kept so Studio and m.youtube.com aren't affected.Closes #2219 (also #2222).
🔍 Reproduction Steps 🔍