sim icon indicating copy to clipboard operation
sim copied to clipboard

feat[ui]: enable light/dark mode toggle and fix light theme colors

Open Shivam-002 opened this issue 1 week ago • 2 comments

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 avatar Dec 16 '25 11:12 Shivam-002

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

A member of the Team first needs to authorize it.

vercel[bot] avatar Dec 16 '25 11:12 vercel[bot]

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, and syncThemeToNextThemes
  • Replaced commented-out theme Combobox with a simple Dark Mode switch toggle
  • Fixed --surface-elevated CSS 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

greptile-apps[bot] avatar Dec 16 '25 12:12 greptile-apps[bot]