feat[ui]: enable light/dark mode toggle and fix light theme colors
Enabled the ability to toggle between Light and Dark modes in the General settings. Previously, the app was forced into Dark mode. This change also includes minor color refinements to the Switch Thumb to ensure proper contrast in light mode.
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
https://github.com/user-attachments/assets/1941b504-af39-483c-beb2-59314d5ce960
@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 Overview
Greptile Summary
Enables light/dark mode toggle in General settings, replacing the previously disabled (forced dark) theme system.
- Removed forced dark mode from
ThemeProvider,fetchGeneralSettings, andsyncThemeToNextThemes - Replaced commented-out theme Combobox with a simple Dark Mode switch toggle
- Fixed
--surface-elevatedCSS variable in light mode (was incorrectly set to dark value#202020) - Simplified switch thumb styling to always use white background
- System theme option removed from UI but still supported in backend/storage
Confidence Score: 4/5
- This PR is safe to merge - straightforward theme toggle implementation with tested visual changes.
- Changes are well-scoped and focused on enabling an existing feature. The forced dark mode removal is clean and consistent across all files. Minor styling consideration for switch contrast in light mode.
- Switch component (
switch.tsx) - verify white thumb contrast is acceptable in light mode unchecked state.
Important Files Changed
File Analysis
| Filename | Score | Overview |
|---|---|---|
| apps/sim/app/_shell/providers/theme-provider.tsx | 5/5 | Removed forced dark mode - forcedTheme now returns undefined for non-light-mode pages, allowing user theme preference to apply. |
| apps/sim/app/_styles/globals.css | 5/5 | Fixed --surface-elevated in light mode from #202020 (dark value) to #ffffff (white), correcting a theming bug. |
| apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx | 4/5 | Replaced commented-out theme Combobox with a Dark Mode Switch toggle. Handler now takes boolean instead of string. Note: 'system' theme option no longer available via UI. |
| apps/sim/components/emcn/components/switch/switch.tsx | 4/5 | Simplified thumb color to bg-white. Previously used --text-primary for unchecked state which provided better contrast in light mode. |
| apps/sim/hooks/queries/general-settings.ts | 5/5 | Removed hardcoded 'dark' theme override, now properly reads theme from API response with 'system' as fallback. |
| apps/sim/lib/core/utils/theme.ts | 5/5 | Removed forced dark mode, now properly applies the passed theme. Added system theme detection using media query. |
Sequence Diagram
sequenceDiagram
participant User
participant General as General Settings
participant Hook as useUpdateGeneralSetting
participant API as /api/users/me/settings
participant Zustand as GeneralStore
participant Theme as syncThemeToNextThemes
participant DOM as document.documentElement
User->>General: Toggle Dark Mode switch
General->>Hook: mutateAsync({ key: 'theme', value: 'dark'|'light' })
Hook->>API: PATCH { theme: value }
Hook->>Zustand: Optimistic update (setSettings)
Zustand->>Theme: syncThemeToNextThemes(theme)
Theme->>DOM: localStorage.setItem('sim-theme', theme)
Theme->>DOM: classList.remove('light', 'dark')
Theme->>DOM: classList.add(theme)
API-->>Hook: Success response
Hook->>Hook: Invalidate query cache