fix(ui): render native scrollbars/controls dark in dark theme (Windows)#3922
Merged
Conversation
Closes #3746. The theme is class-based (`.dark` on <html>), but `color-scheme` was only ever set inside `@media (prefers-color-scheme)` fallbacks. So when a user picks the dark theme while their OS is in light mode (common on Windows), the WebView kept painting the default light scrollbar and native controls in an otherwise dark UI, which looks broken. Bind `color-scheme` to the app theme classes: `light` on `:root`, `dark` on `.dark`. The WebView/Chromium then paints native scrollbars and form controls to match the selected theme regardless of the OS setting. CSS-only. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Hey @louis030195 @Anshgrover23 check this, scrollbar and button rendering the same as before... 
|
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.
Problem
Closes #3746.
On Windows in dark theme, the scrollbar and some native controls render light and look broken against the dark UI.
Root cause: the app theme is class-based (
.darkon<html>, toggled by the theme provider), but thecolor-schemeCSS property was only ever set inside@media (prefers-color-scheme: …)fallbacks. So when a user selects the dark theme while their OS is in light mode (extremely common on Windows),color-schemestayslightand the WebView keeps painting the default light scrollbar / native controls.Fix (CSS-only)
Bind
color-schemeto the theme classes inglobals.css::root { color-scheme: light; }.dark { color-scheme: dark; }Chromium/WebView2 then paints native scrollbars and form controls to match the selected theme, independent of the OS setting.
.darkfollows:rootin source order at equal specificity, so dark wins whenhtml.darkis set.Testing
CSS-only change using a standard property. I don't have a Windows box in this environment to capture the before/after, so this is verified by inspection:
color-schemeis the documented mechanism for theming native scrollbars/controls on Chromium, and the bug is precisely that it was gated behindprefers-color-schemeinstead of the app's theme class. Worth a quick visual confirmation on a Windows build before merge.🤖 Generated with Claude Code