UI: Make the Dag pause toggle distinguishable in dark mode - #70203
Merged
Conversation
The off-state track uses bg.emphasized, which in this palette lands within 0.05 oklch lightness of the page background, so only the white thumb reads and the pill has no visible edge. An inset shadow is used rather than a border because the thumb's size and its checked travel are both derived from --switch-height/--switch-width: anything that takes space in the control's content box shrinks the box the thumb sits in while its translate distance stays the same, which pushes it off centre and past the end of the track.
eddiesr93
requested review from
bbovenzi,
choo121600,
guan404ming,
pierrejeambrun,
ryanahamilton,
shubhamraj-git and
vatsrahul1001
as code owners
July 21, 2026 20:26
dheerajturaga
approved these changes
Jul 21, 2026
dheerajturaga
left a comment
dheerajturaga
left a comment
Member
There was a problem hiding this comment.
I agree in dark more this is not easy to make out. However Id leave the decision to merge to the UI maintainers
Shrividya
approved these changes
Jul 22, 2026
choo121600
approved these changes
Jul 22, 2026
1 task
vatsrahul1001
added a commit
that referenced
this pull request
Aug 3, 2026
…70748) The off-state track uses bg.emphasized, which in this palette lands within 0.05 oklch lightness of the page background, so only the white thumb reads and the pill has no visible edge. An inset shadow is used rather than a border because the thumb's size and its checked travel are both derived from --switch-height/--switch-width: anything that takes space in the control's content box shrinks the box the thumb sits in while its translate distance stays the same, which pushes it off centre and past the end of the track. (cherry picked from commit 83c0a9c) Co-authored-by: Eddie Roman <44783562+eddiesr93@users.noreply.github.com>
vatsrahul1001
added a commit
that referenced
this pull request
Aug 5, 2026
…70748) The off-state track uses bg.emphasized, which in this palette lands within 0.05 oklch lightness of the page background, so only the white thumb reads and the pill has no visible edge. An inset shadow is used rather than a border because the thumb's size and its checked travel are both derived from --switch-height/--switch-width: anything that takes space in the control's content box shrinks the box the thumb sits in while its translate distance stays the same, which pushes it off centre and past the end of the track. (cherry picked from commit 83c0a9c) Co-authored-by: Eddie Roman <44783562+eddiesr93@users.noreply.github.com>
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
5 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.
In dark mode the Dag pause toggle is hard to make out: its off-state track uses
bg.emphasized, which in this palette lands within 0.05 oklch lightness of the pagebackground (0.08 in light mode), so only the white thumb reads and the pill has no
visible edge.
This gives the switch control a 1px inset ring so the shape is legible in both modes.
Why an inset shadow and not a border
Two earlier attempts, #67406 and #69159, added a
borderto the control and were closedafter review found the thumb was no longer centred and the horizontal layout shifted.
That is unavoidable with a border: the thumb's size and its checked travel are both
derived from
--switch-height/--switch-width, so any box-model space the controltakes shrinks the content box the thumb sits in while its translate distance stays the
same.
box-shadow: insetcosts no layout space.The thumb also stays concentric with the track's end cap — both are centred on (8, 8),
with radii 6.4 and 8. Measured in a running UI:
mainBefore / after
Dags list,
breeze start-airflow --dev-mode.Dark mode — before, then after:
Light mode. The same problem is milder but present: against a striped row the
off-state track sits about 0.04 oklch from the row behind it, so the pill loses its edge
there too. That is why the ring is applied in both modes rather than only in dark.
closes: #66759
Was generative AI tooling used to co-author this PR?
Generated-by: Claude Code (Opus 4.8) following the guidelines
Drafted-by: Claude Code (Opus 4.8); reviewed by @eddiesr93 before posting