From f815e190be8fdc2d92bc76d12c75adb0f7596cae Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Thu, 24 Sep 2026 14:41:21 +1000
Subject: [PATCH] fix(ui): restore light-mode switch thumb contrast (#50828)
## Problem
After the primary colour split in #50697, the checked Switch thumb was
always `bg-black`. That reads well on `primary-bright` in dark mode, but
looks wrong in light mode where the knob should be white-ish.
## Solution
Use `bg-primary-foreground` for the checked thumb. That is the paired
content-on-primary token (near-white in light, dark surface in dark), so
it contrasts on the `primary-bright` track without hardcoding
black/white.
| Before | After |
| --- | --- |
| 
| 
|
## Review instructions
1. Open the
[Switch](https://design-system-git-dnywh-fix-switch-thumb-light-supabase.vercel.app/design-system/docs/components/switch)
page on the design-system deploy preview.
2. In light mode, turn a switch on: the knob should be white-ish on the
green track.
3. Switch to dark mode and turn a switch on: the knob should be dark on
the green track.
---
packages/ui/src/components/shadcn/ui/switch.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/ui/src/components/shadcn/ui/switch.tsx b/packages/ui/src/components/shadcn/ui/switch.tsx
index 254369bd706..55fb28d1565 100644
--- a/packages/ui/src/components/shadcn/ui/switch.tsx
+++ b/packages/ui/src/components/shadcn/ui/switch.tsx
@@ -23,7 +23,7 @@ const switchRootVariants = cva(
)
const switchThumbVariants = cva(
- 'pointer-events-none block rounded-full bg-foreground-lighter data-[state=checked]:bg-black shadow-lg ring-0 transition-transform',
+ 'pointer-events-none block rounded-full bg-foreground-lighter data-[state=checked]:bg-primary-foreground shadow-lg ring-0 transition-transform',
{
variants: {
size: {