fix(web): make the unchecked switch thumb visible in dark mode

[deathemperor]

What Changed

The switch thumb gets the foreground colour when the switch is unchecked in dark mode (dark:data-unchecked:bg-foreground on the thumb in apps/web/src/components/ui/switch.tsx). One class, nothing else touched: light mode, the checked state and the disabled opacity are unchanged, and custom dark themes pick it up through the existing .dark variant.

Surfaces: web and desktop (desktop renders the web UI). Mobile is unaffected, it uses its own native switch.

Why

In the default dark theme the thumb is bg-background, which is the page colour, and the unchecked track is an 8% white fill. So an unchecked switch is a faint pill with no visible knob. A disabled one adds 64% opacity on top and vanishes. On Settings → Connections the Network access, Tailscale HTTPS and Publish agent activity toggles were unreadable on a dark monitor.

Making the thumb readable is the smallest change that fixes it. The track is left as the theme intends (the dark theme deliberately relies on edges rather than milky fills), and the checked state already has a dark thumb on the primary colour.

UI Changes

Settings → Connections, default dark theme, disabled unchecked switch (web dev server, Chrome).

Before	After

Full row:

Before

After

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes (no motion change)

Verified with vp lint apps/web/src/components/ui/switch.tsx and vp run --filter @t3tools/web typecheck.

Claude Fable 5.1 via Claude Code

Summary by CodeRabbit

• Style
  • Improved the appearance of unchecked switches in dark mode by updating the switch thumb color for better contrast.

[macroscopeapp]

Approvability

Verdict: Approved at acc0a21

Macroscope's review found this PR approvable — This is a focused one-line visual fix that improves unchecked switch contrast only in dark mode. It leaves switch behavior, state semantics, light-mode styling, and product defaults unchanged.

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

[coderabbitai]

Understand this PR’s impact

Explore downstream dependencies and potential security impact with Blast Radius.

View blast radius →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: b7f251da-9c77-44ef-a766-78d3021feaca

📥 Commits

Reviewing files that changed from the base of the PR and between acc0a219ea5bd88bf860d35e10f30cc651c84417 and 68ec96b.

📒 Files selected for processing (1)

• apps/web/src/components/ui/switch.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The switch thumb now uses the foreground color for unchecked switches in dark mode. No other behavior changes.

Changes

Switch styling

Layer / File(s)	Summary
Dark unchecked thumb styling apps/web/src/components/ui/switch.tsx	Adds dark:data-unchecked:bg-foreground to the switch thumb classes.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~2 minutes

Change: Bug fix

Suggested reviewers: juliusmarminge

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: making the unchecked switch thumb visible in dark mode.
Description check	✅ Passed	The description explains what changed, why it changed, the affected surfaces, UI impact, screenshots, checklist status, and verification commands. It is complete and aligned with the repository templa…
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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

[shivamhwp]

Thanks for this! We tried it in dark mode, and we prefer the current unchecked switch. The brighter thumb draws too much attention, with a lot of white on dark surfaces, and the current contrast is intentional. Closing for now. If you see a real visibility problem on a specific display or theme, please open an issue with a screenshot.