Use custom theme colors in welcome preview - #39424
Open
aguscruiz wants to merge 5 commits into
Open
Conversation
github-actions
Bot
added
the
CI/storybook-url
aguscruiz
enabled auto-merge (squash)
August 26, 2026 19:54
zenparsing
reviewed
Aug 26, 2026
zenparsing
approved these changes
Aug 26, 2026
aguscruiz
disabled auto-merge
August 26, 2026 20:56
The welcome page now detects custom theme colors and tints the browser mock chrome when the selected theme is light and not the default grey baseline. This also updates the theme color selector's inner dot styling to match the container background and adds a helper for checking whether a theme is a custom color theme.
Compute toolbar tint in AppearanceStep and pass it to BrowserPreview. AppearanceStep now imports theme_colors and derives tintToolbarBackground from useTheme; BrowserPreview accepts a tintToolbarBackground prop and no longer queries the welcome API or theme logic. Update CSS class name from "custom-theme-color" to "tint-toolbar-background" in browser_preview.style. Also clean up minor whitespace in theme_color_selector.style. This separates concerns (parent decides theming) and simplifies the preview component.
This reverts commit 5bd8417.
Mirror the browser's real chrome colors in the welcome-page preview by loading chrome://theme/colors.css and switching the preview styles to use theme CSS variables (with Nala fallbacks). Removes the tint-toolbar logic and the themeHasCustomColor helper; AppearanceStep no longer computes/passes tintToolbarBackground and BrowserPreview no longer accepts that prop. Keeps the preview in sync with the active window theme while preserving sensible fallbacks for Storybook.
aguscruiz
force-pushed
the
new-onboarding-theme-improvements
branch
from
August 26, 2026 21:06
901cd45 to
18c00b2
Compare
Collaborator
|
A Storybook has been deployed to preview UI for the latest push |
netzenbot
reviewed
Aug 27, 2026
| <link rel="stylesheet" href="chrome://resources/brave/css/nala.css" blocking="render" > | ||
| <!-- The browser preview mirrors real browser chrome colors, which live in the | ||
| "chrome" color set. ColorChangeUpdater keeps this stylesheet in sync. --> | ||
| <link rel="stylesheet" href="chrome://theme/colors.css?sets=ui,chrome"> |
Collaborator
There was a problem hiding this comment.
BraveWelcomePageUI never does content::URLDataSource::Add(profile, std::make_unique<ThemeSource>(profile)) (browser/ui/webui/brave_welcome_page/brave_welcome_page_ui.cc), and chrome://theme is registered per-profile, not globally — the legacy BraveWelcomeUI adds it explicitly. Without it this stylesheet 404s and every --color-* lookup silently falls back to the Nala default, making the change a no-op unless some other WebUI in the profile happened to register the source first.
zenparsing
reviewed
Aug 27, 2026
| <link rel="stylesheet" href="chrome://resources/brave/fonts/inter.css" blocking="render" > | ||
| <link rel="stylesheet" href="chrome://resources/brave/css/nala.css" blocking="render" > | ||
| <!-- The browser preview mirrors real browser chrome colors, which live in the | ||
| "chrome" color set. ColorChangeUpdater keeps this stylesheet in sync. --> |
| } | ||
|
|
||
| &.vertical { | ||
| /* The vertical tab strip takes the toolbar color, as it does in the |
| } | ||
|
|
||
| &.horizontal { | ||
| /* Horizontal tabs sit on the window frame rather than the toolbar. */ |
| // chrome://theme/colors.css. Using them keeps the preview in step with the | ||
| // window behind it, including the tint applied by the selected color theme. | ||
| // The Nala fallbacks are the browser's default values, and apply wherever | ||
| // colors.css is unavailable (e.g. Storybook). |
Collaborator
There was a problem hiding this comment.
Reduce this comment. We only need a short explanation for where the CSS variables are coming from.
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
4 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.
When a non-default color theme is selected during onboarding, tint the mock browser chrome with
toolbar.button.hoverin light mode (horizontal and vertical tabs). Dark mode keepschromeBackgroundDesktop. The selected swatch checkmark cut-out now usescontainer.backgroundso it matches the page in both schemes.Test plan