fix[ui]: Improve Switch visibility using brand color for active state

[Shivam-002]

Updated the Switch background to use var(--brand-500) rather than var (--surface-13) when checked. This provides a clear visual cue to the user that the component is active.

Summary

Brief description of what this PR does and why.

Fixes #(issue)

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

How has this been tested? What should reviewers focus on?

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

[vercel]

@Shivam-002 is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Overview

Greptile Summary

Updated Switch components to use var(--brand-500) for improved visibility in the checked state. The EMCN switch now uses the brand color universally, while the UI switch applies it only in dark mode.

• EMCN switch: Changed from --surface-14 to --brand-500 for checked state
• UI switch: Changed from --surface-13 to --brand-500 for dark mode checked state only

Inconsistency found: The two switch components have different behavior - EMCN uses brand color in all modes, while UI switch still uses --surface-11 in light mode. Consider applying brand color consistently across both light and dark modes for the UI switch to match the EMCN implementation.

Confidence Score: 4/5

• This PR is safe to merge with minor styling inconsistency
• The changes are minimal CSS variable updates that improve visibility. However, the inconsistent behavior between the two switch components (one uses brand color universally, the other only in dark mode) should be addressed for better UX consistency.
• Pay attention to apps/sim/components/ui/switch.tsx for the light mode styling inconsistency

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/components/emcn/components/switch/switch.tsx	5/5	Updated checked state to use --brand-500 for better visibility. Change is clean and consistent.
apps/sim/components/ui/switch.tsx	4/5	Updated dark mode checked state to use --brand-500. Light mode still uses --surface-11, creating inconsistency with EMCN switch.

Sequence Diagram

sequenceDiagram
    participant User
    participant Switch
    participant CSS Variables
    
    User->>Switch: Clicks switch component
    Switch->>Switch: Toggle state to checked
    alt EMCN Switch
        Switch->>CSS Variables: Apply bg-[var(--brand-500)]
    else UI Switch (Light Mode)
        Switch->>CSS Variables: Apply bg-[var(--surface-11)]
    else UI Switch (Dark Mode)
        Switch->>CSS Variables: Apply bg-[var(--brand-500)]
    end
    CSS Variables->>Switch: Render background color
    Switch->>User: Display active state

Loading

[greptile-apps]

Additional Comments (1)

1. apps/sim/components/ui/switch.tsx, line 13 (link)

   style: Light mode checked state still uses var(--surface-11) while dark mode uses var(--brand-500). This creates inconsistency with the EMCN switch component which uses --brand-500 for all modes. Consider using --brand-500 for light mode as well.

   _{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}