fix(web): switched-off controls stay visible in dark mode

[Gigioxx]

Fixes #14979.

In dark mode an unchecked switch is close to invisible. Its thumb is bg-background, the same color as the page, and the track is an 8% white fill. On Settings → Connections it gets worse. A switched-off environment row is drawn at 60% opacity, switch included, so an enabled-but-off switch looks the same as a disabled one. The reporter read both saved environments as unavailable and lost track of their remote threads.

The fix has two parts:

• Switch: an unchecked thumb in dark mode uses muted-foreground, the theme's secondary text gray, instead of the page color. Light mode, the checked state, and the disabled opacity are unchanged. fix(web): make the unchecked switch thumb visible in dark mode #10477 tried a foreground (near-white) thumb and was closed because it pulled too much attention. This uses the same gray as the row's "Off" text, so the knob reads as a control without adding white to dark surfaces.
• EnvironmentRow: a switched-off row now dims only the icon, name, and subtitle. The switch and menu stay at full strength, so "off" and "unavailable" look different.

Dark theme, web dev server, Chrome:

	Before	After
Connections, switched-off environment
General, any unchecked switch

Reproduced with a worktree dev server and a second local server paired as a remote environment, then switched off. After the change I checked the same row switched on (unchanged blue switch) and the disabled "Network access" switch (still dimmed by its own disabled opacity). vp fmt --check and vp lint on both files and vp run --filter @t3tools/web typecheck pass. Desktop renders the same web UI. Mobile uses its own native switch and is not affected. I did not check custom app themes.

Created with Claude Opus 5.5 in Claude Code.

Fixes #17874.

[macroscopeapp]

Approvability

Verdict: Approved at 73a6984

Macroscope's review found this PR approvable — This is a small, contained dark-mode presentation fix: switched-off environment identities remain dimmed while their controls stay distinguishable, and unchecked dark-mode switch thumbs gain contrast. No state, persistence, API, or workflow behavior changes.

Notes:

• Diff unchanged. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 73a6984

[coderabbitai]

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: 7511c967-8131-4d01-9f2a-f5bbf8cdb087

---

📥 Commits

Reviewing files that changed from the base of the PR and between 43bd667 and 73a6984.

---

📒 Files selected for processing (2)

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

---

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 7 remain after this review.

---

---

📝 Walkthrough

Walkthrough

Environment settings now dim the machine icon and identity content without dimming row controls. The unchecked switch thumb also has a dark-mode background color.

Changes

Settings appearance

Layer / File(s)	Summary
Environment row and switch appearance apps/web/src/components/settings/EnvironmentRow.tsx, apps/web/src/components/ui/switch.tsx	Dimmed styling applies to the machine icon and identity content instead of the entire row. The unchecked switch thumb uses a dark-mode background color.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~5 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: juliusmarminge

---

Merge Risk: ⚪ Minimal · up to 73a69

The requested dark-mode appearance changes are applied at the intended row and switch states; no concrete regression or remaining merge blocker is established.

Pre-merge checks | 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check		Issue #14979 requires off switches to remain recognizable and distinguishable from unavailable controls. switch.tsx applies dark:data-unchecked:bg-muted-foreground to the thumb, which affects only…
Out of Scope Changes check		Both changed files implement the visibility fixes requested by #14979. The switch thumb styling addresses dark-mode visibility, and the environment-row opacity change separates switched-off rows from …
Docstring Coverage		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 2 functions across 2 files.
Title check		The title clearly and concisely describes the main fix: keeping switched-off controls visible in dark mode.
Description check		The description clearly explains the problem, the two-part change, linked issue context, affected platforms, screenshots, verification steps, test results, and known limitations.

---

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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