Skip to content

Improve DAG toggle contrast in dark mode#67406

Closed
bobu-putheeckal wants to merge 1 commit into
apache:mainfrom
bobu-putheeckal:codex-airflow-66759-dark-toggle
Closed

Improve DAG toggle contrast in dark mode#67406
bobu-putheeckal wants to merge 1 commit into
apache:mainfrom
bobu-putheeckal:codex-airflow-66759-dark-toggle

Conversation

@bobu-putheeckal
Copy link
Copy Markdown

What

Improve dark-mode switch contrast by adding a dark-mode border to the shared Chakra switch control. The checked state keeps using the existing color palette token, while the unchecked/off state gains a visible outline on dark surfaces.

This addresses the DAG pause toggle contrast reported in #66759.

Why

In dark mode, the unchecked switch track can blend into the surrounding dark background, making paused/off DAG toggles hard to distinguish. A token-based border makes the switch shape clearer without introducing new colors or changing light-mode behavior.

Tests

  • pnpm exec eslint src/theme.ts
  • pnpm exec tsc --p tsconfig.app.json --pretty false
  • pnpm build

Screenshots

I could not capture a full Airflow DAG-list screenshot from the raw Vite dev shell because that shell depends on Airflow backend-provided base/config values to render the app. The change is limited to the theme recipe and was verified with the focused static checks and production build above.


closes: #66759

Was generative AI tooling used to co-author this PR?
  • Yes — OpenAI Codex

Generated-by: OpenAI Codex following the guidelines

@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label May 24, 2026
@potiuk potiuk added the ready for maintainer review Set after triaging when all criteria pass. label May 24, 2026
@bobu-putheeckal
Copy link
Copy Markdown
Author

Additional detail: the visual change is isolated to the shared Chakra switch recipe in dark mode. Unchecked DAG toggles now get a token-based border (border.emphasized) so the switch outline remains visible against the dark table background, while light mode keeps the transparent border and checked switches keep the color-palette border.

@kaxil
Copy link
Copy Markdown
Member

kaxil commented May 24, 2026

PR template hasn't been followed on any of your PRs. As such I am closing all your PRs since I see little to no evidence of actual testing and mass PRs to Airflow & other repos.

@kaxil kaxil closed this May 24, 2026
@kaxil kaxil added the ai-slop label May 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ai-slop area:UI Related to UI/UX. For Frontend Developers. ready for maintainer review Set after triaging when all criteria pass.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dag toggle is very hard to distinguise in dark mode

3 participants