fix(web): keep unchecked switches visible in custom themes

[evbuildsnet]

Unchecked switches disappeared in imported themes whose input border is transparent. Catppuccin Mocha exposed this in Settings > General: Archive confirmation was present but invisible while off.

The off track now uses the theme's contrast-solved muted foreground at 30% opacity. It stays visible without changing the checked state or control geometry.

BEFORE

AFTER

Verification

• vp test run apps/web/src/components/ui/switch.test.tsx
• Targeted format and type-aware lint passed
• vp run @t3tools/web#typecheck
• Browser verification in an isolated T3 environment with Catppuccin Mocha imported from Open VSX
• Confirmed Catppuccin maps --input to the same color as --background; the fixed off track instead resolves from --muted-foreground

Built with GPT-5.6-Sol in T3 Code through the Codex harness.

---

Note

Low Risk
Cosmetic UI token change on switch tracks only; no logic, auth, or data handling impact.

Overview
Unchecked switch tracks no longer disappear in themes where --input matches the background (e.g. Catppuccin Mocha).

The off-state track on Switch and switch-style MenuCheckboxItem now uses data-unchecked:bg-muted-foreground/30 instead of data-unchecked:bg-input. Checked styling and geometry are unchanged. A small SSR markup test locks in the new class.

^{Reviewed by Cursor Bugbot for commit 28f1680. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix unchecked switch visibility in custom themes

Replaces the unchecked track class data-unchecked:bg-input with data-unchecked:bg-muted-foreground/30 in both Switch and MenuCheckboxItem (switch variant). Adds tests asserting the new class is present and the old one is removed.

^{Macroscope summarized 28f1680.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d7c1ea05-8a86-4524-b96e-393e718999e6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

One consistency finding: the menu switch variant still uses the old unchecked token, so the two switch surfaces now diverge.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Approved at 28f1680

Macroscope's review found this PR approvable — This is a simple CSS fix changing a color token for unchecked switch backgrounds to ensure visibility in custom themes. Both switch surfaces are updated consistently, and a test is added to verify the change.

^{You can add or adjust custom eligibility rules. Learn more.}