Repository navigation
fix(ui): make dropdown choices readable in dark JupyterLab themes - #497
Merged
Merged
Conversation
The chat mode select reset its background to initial while keeping the theme's text color, so in a dark theme the native option list showed light text on a light popup. Give it the themed input background and set explicit theme colors on the option lists of the NBI selects (chat mode, form fields, settings dialog, perf panel), which browsers that draw options from their own colors would otherwise leave on the light palette. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Follow-ups from review of the dark-theme fix: - Give the chat mode select the footer's own background instead of the input background, so it looks as it did when it was transparent (the input background made it a lighter chip in dark themes). An explicit color is what keeps the native popup from falling back to the light palette. - Match the chat mode popup to that select so the closed and open states are the same tone. - Add fallbacks to the option colors so a theme that omits a variable does not leave the options transparent and bring the original bug back. Checked against the default light and dark themes and jupyterlab-night 0.5.2 in headless Chrome, plus a theme that defines almost nothing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
mbektas
approved these changes
Sep 22, 2026
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
3 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.
Summary
Makes the chat mode dropdown (and the other NBI selects' option lists) readable in dark JupyterLab themes.
Closes #496
Problem
.chat-mode-selecthadbackground-color: initialwith a theme-derived text color. In a dark theme that is light text on a transparent select, and since JupyterLab sets nocolor-scheme, the browser paints the native option popup on its default light palette. The choices are near-invisible.Solution
--jp-cell-editor-background), so it looks as it did when transparent. An explicit color is what stops the popup falling back to the light palette. I first used the input background, which made it a lighter chip in dark themes; the footer background avoids that change.<option>matches that select, so the closed and open states are the same tone.--jp-layout-color2/--jp-ui-font-color0). Every fallback chain ends in--jp-layout-color1thenCanvas/CanvasText, so a theme that leaves a variable out does not bring the bug back.I mapped all 22
<select>elements insrc/; each falls under one of these four containers. A new select outside them would need its own rule.Testing
tests/ts/select-theme-css.test.tspins the declarations. It fails on the old CSS and passes on the new. It reads the stylesheet text, so it checks the declarations exist, not that they take effect.Checked in headless Chrome by loading the real theme CSS with the old and new
base.cssand reading computed styles, in the default light and dark themes, jupyterlab-night 0.5.2, and a theme defining almost nothing:#212121, same tone as the footer#f0f6fcon the default light popup, ~1.1:1#f0f6fcon#0d1117, same tone as the footerThe "before" popup color assumes the browser's default light popup, inferred from the missing
color-scheme.jlpm jest(580 passed),jlpm tsc --noEmit,jlpm lint:checkandpytest tests/are clean. The full pytest run was last done on the tour branch; this change is CSS and a Jest test only.Not checked: the painted native popup (headless Chrome cannot render it), Firefox, and macOS, where the native menu may follow the OS appearance instead of the page.
🤖 Generated with Claude Code