Skip to content

fix(theme): make native select popups follow dark theme on Linux#141

Merged
Nic-dorman merged 1 commit into
mainfrom
fix/select-dropdown-color-scheme
May 21, 2026
Merged

fix(theme): make native select popups follow dark theme on Linux#141
Nic-dorman merged 1 commit into
mainfrom
fix/select-dropdown-color-scheme

Conversation

@Nic-dorman
Copy link
Copy Markdown
Contributor

Summary

  • Adds color-scheme: dark to :root (and color-scheme: light to :root.light) in assets/css/main.css
  • Fixes the open <select> popup rendering as a light GTK panel on Linux even when our app chrome is dark
  • Reported against v0.8.0-rc.3 on the language picker in Settings

Why

On Linux, Tauri renders via webkit2gtk. The closed <select> control is styled by our CSS (bg-autonomi-dark, etc.) but the open popup is painted by GTK, which uses the system theme — and most distros default to a light theme. Our CSS can't reach into the GTK popup; we need to tell the webview which variant of native controls to render. color-scheme is the W3C-standard property for exactly this:

Specifies which color schemes the element is comfortable being rendered in. The user agent then uses an appropriate variant of native controls.

Side effects (all positive):

  • Scrollbars also pick up the dark variant on Linux
  • Other native controls (date pickers, file inputs) follow the same rule

Why now

The language picker is the entry point for any future CJK font-banner testing on Linux — testers need to switch to ja to see the banner. A jarring light-on-dark dropdown popup right at that entry point reads as broken even though the rest of the UI is fine.

Test plan

  • Linux: open language dropdown — popup is dark
  • Linux: toggle to light mode — popup is light
  • Windows / macOS: no visual regression (was already correct via OS)
  • vue-tsc clean (no JS / TS changes)
  • npm run build clean

🤖 Generated with Claude Code

On Linux webkit2gtk, the open <select> popup is painted by GTK using
the system theme — light on most distros — even when our app chrome
is dark. The W3C-standard color-scheme property is the right hint:
it tells the webview which variant of native controls (select popups,
scrollbars, date pickers) to render.

color-scheme: dark on :root by default; color-scheme: light flips
together with the existing .light class on <html>.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@Nic-dorman Nic-dorman merged commit 8fbadc0 into main May 21, 2026
4 checks passed
@Nic-dorman Nic-dorman deleted the fix/select-dropdown-color-scheme branch May 21, 2026 14:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant