Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

feat: enable light mode and add theme toggle in sidebar #2373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Siddhartha-singh01 wants to merge 1 commit into simstudioai:main
base: main
Choose a base branch
Loading
from Siddhartha-singh01:feature/light-mode

Conversation

@Siddhartha-singh01
Copy link

@Siddhartha-singh01 Siddhartha-singh01 commented Dec 15, 2025

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

greptile-apps[bot] reacted with thumbs up emoji
Copy link

vercel bot commented Dec 15, 2025

@Siddhartha-singh01 is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Contributor

greptile-apps bot commented Dec 15, 2025

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

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[REQUEST] Light mode support

1 participant

AltStyle によって変換されたページ (->オリジナル) /