From 4a423d4ea4b03b309077ef21c7d9ae7227547f4d Mon Sep 17 00:00:00 2001 From: Eddie Roman Date: Tue, 21 Jul 2026 23:23:48 +0300 Subject: [PATCH] UI: Make the Dag pause toggle distinguishable in dark mode 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. --- airflow-core/src/airflow/ui/src/theme.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/airflow-core/src/airflow/ui/src/theme.ts b/airflow-core/src/airflow/ui/src/theme.ts index 8fc32ed451689..7c9d837b37258 100644 --- a/airflow-core/src/airflow/ui/src/theme.ts +++ b/airflow-core/src/airflow/ui/src/theme.ts @@ -382,6 +382,12 @@ const defaultAirflowTheme: ThemingConfig = { }, switch: { slots: [], + base: { + control: { + shadow: "inset 0 0 0px 1px var(--shadow-color)", + shadowColor: { _dark: "gray.500", _light: "gray.400" }, + }, + }, defaultVariants: { size: "sm" } as Record, }, // size="sm" gives px/py:2 on cell and columnHeader vs px/py:3 for "md".