Skip to content

Conversation

@thiagokroger
Copy link
Contributor

@thiagokroger thiagokroger commented Jan 24, 2026

Implements dark mode theming across the application:

Important to know:

  • The whole theme selector is only available through an Env var called VITE_ENABLE_THEMES
  • Light mode is still the default, once we are confident we can let system be the default.

Features added

  • Add theme toggle with system preference detection
  • Update UI components to support dark/light themes
  • Ensure proper contrast and accessibility in dark mode
  • Default to light theme with user preference persistence
image image

Closes #1128


Note

Adds first-class dark mode across the app with theme persistence and system detection.

  • New ThemeProvider/useTheme and ThemeSelector (gated by VITE_ENABLE_THEMES via isThemeConfigEnabled) replace useDarkMode; App wraps content and Toaster/dialogs adapt to effectiveTheme
  • Global CSS updates: .dark variables, scrollbar/JSON viewer dark styles, and Tailwind @custom-variant dark (&:is(.dark *))
  • Broad UI adjustments to support dark classes (inputs, buttons, selects, labels, text, panels, modals, headers, auth pages, settings, canvas, logs)
  • Standardized integration icons via APP_LOGO_MAP and DARK_ICONS_NEEDING_INVERT; components/mappers now pass appName instead of iconSrc where applicable
  • New isThemeConfigEnabled env util; numerous pages conditionally render Appearance section with ThemeSelector
  • Minor dependency bump: html-to-image 1.11.11 → 1.11.13

Written by Cursor Bugbot for commit 273ad6f. This will update automatically on new commits. Configure here.

@thiagokroger thiagokroger force-pushed the feat/dark-mode branch 2 times, most recently from e9f7658 to ac973f8 Compare January 24, 2026 16:07
@thiagokroger thiagokroger force-pushed the feat/dark-mode branch 2 times, most recently from 110ddad to 0fad515 Compare January 26, 2026 16:37
Implements comprehensive dark mode theming across the application:
- Add theme toggle with system preference detection
- Update UI components to support dark/light themes
- Ensure proper contrast and accessibility in dark mode
- Default to light theme with user preference persistence

Closes superplanehq#1128

Signed-off-by: thiagokroger <[email protected]>
- Add dark mode styling to canvas log sidebar
- Update execution chain UI components for dark theme
- Apply dark mode to organization settings page
- Add environment variable to control appearance settings visibility
- Fix cursor styling issues in dark mode

Signed-off-by: thiagokroger <[email protected]>
…Storage errors

- Add dark mode variants to waiting state in TIME_GATE_STATE_MAP
- Wrap localStorage access in try-catch to prevent crashes in Safari private
  browsing mode or when storage is blocked

Signed-off-by: thiagokroger <[email protected]>
…utation

- Add appName to list_incidents mapper for proper dark mode icon inversion
- Prevent install modal from closing via overlay/Escape while mutation is pending

Signed-off-by: thiagokroger <[email protected]>
thiagokroger and others added 4 commits January 26, 2026 19:08
The refactoring to centralized APP_LOGO_MAP removed support for AWS
Lambda icons. This restores the custom icon for AWS building blocks.

Signed-off-by: thiagokroger <[email protected]>
Resolve conflicts in:
- IntegrationDetails.tsx: Keep dark mode styling (neutral-*), adopt Integration terminology
- Integrations.tsx: Keep dark mode styling, use new Integration modal structure
- SettingsTab.tsx: Keep dark mode icon styling, adopt Integration terminology

Co-Authored-By: Claude Opus 4.5 <[email protected]>
Signed-off-by: thiagokroger <[email protected]>
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

- Remove unused Dialog imports from Integrations.tsx
- Change block.appName to block.integrationName in BuildingBlocksSidebar
- Change appName to integrationName in componentSidebar

Co-Authored-By: Claude Opus 4.5 <[email protected]>
Signed-off-by: thiagokroger <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark mode

1 participant