feat: enable light mode and add theme toggle in sidebar

[Siddhartha-singh01]

Fixes

Fixes #2372

Type of Change
• Bug fix
• New feature
• Breaking change
• Documentation
• Other: UI/UX enhancement

Description

This PR adds Light Mode support along with a theme toggle in the sidebar.
Users can now switch between light and dark themes easily, improving accessibility and overall user experience. The selected theme persists across sessions.

Testing
• Manually tested theme switching between Light and Dark modes
• Verified styles across main pages and components
• Checked persistence on page reload
• Ensured no visual regressions in existing dark mode

Reviewers can focus on:
• UI consistency in light mode
• Sidebar toggle behavior
• Theme persistence logic

Checklist
• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated (not applicable for UI-only change)
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the CLA

[vercel]

@Siddhartha-singh01 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

This PR enables light mode support and adds a theme toggle to the workspace sidebar.

Key changes:

• Removed forced dark theme on workspace pages by changing forcedTheme from 'dark' to undefined when not on light-mode pages
• Added theme toggle button in the sidebar footer navigation that switches between light and dark modes using next-themes
• Theme preference persists across sessions via the existing sim-theme localStorage key

The implementation leverages the existing next-themes provider configuration and follows established patterns in the codebase. The sidebar wrapper already has suppressHydrationWarning to handle theme-related hydration concerns.

Confidence Score: 5/5

• This PR is safe to merge - minimal, well-contained changes that follow existing patterns
• The changes are simple and focused: one line change in the theme provider and a small addition to the sidebar. The implementation uses the existing next-themes infrastructure correctly and follows established codebase patterns.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/_shell/providers/theme-provider.tsx	5/5	Changed forcedTheme from forcing 'dark' on workspace pages to undefined, enabling user-controlled theme switching.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx	5/5	Added theme toggle in footer navigation using useTheme hook from next-themes with Sun/Moon icons.

Sequence Diagram

sequenceDiagram
    participant User
    participant Sidebar
    participant useTheme
    participant ThemeProvider
    participant localStorage

    User->>Sidebar: Clicks theme toggle button
    Sidebar->>useTheme: setTheme('light' or 'dark')
    useTheme->>ThemeProvider: Update theme context
    ThemeProvider->>localStorage: Store theme in 'sim-theme'
    ThemeProvider->>Document: Apply 'light' or 'dark' class to html
    Document-->>User: UI updates to selected theme

Loading

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}