feat(frontend/ui): Increase contrast of Switch component (#11309)

- Resolves #11308

### Changes 🏗️

- Change background color of `Switch` in unchecked state from
`neutral-200` to `zinc-300`

Before / after:
<center>
<img width="48%" alt="before"
src="https://github.com/user-attachments/assets/d23c9531-2f7e-49d3-8a92-f4ad40e9fa14"
/>

<img width="48%" alt="after"
src="https://github.com/user-attachments/assets/9f27fbee-081e-4b26-8b24-74d5d5cdcef8"
/>
</center>

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Visually verified new look
This commit is contained in:
Reinier van der Leer
2025-11-04 09:10:24 +01:00
committed by GitHub
parent b1a2d21892
commit 69b6b732a2

View File

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950",
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-zinc-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950",
className,
)}
{...props}