Skip to content

feat: Implement user theme preference settings #3160

Merged
jeanfbrito merged 8 commits intodevfrom
add-theme-selection
Jan 23, 2026
Merged

feat: Implement user theme preference settings #3160
jeanfbrito merged 8 commits intodevfrom
add-theme-selection

Conversation

@jeanfbrito
Copy link
Copy Markdown
Member

@jeanfbrito jeanfbrito commented Dec 8, 2025 •
edited by atlassian bot
Loading

  • Introduced a new ThemeAppearance component to manage user theme preferences, allowing selection between 'auto', 'light', and 'dark' themes.
  • Updated state management to include userThemePreference, replacing the previous themeAppearance handling.
  • Removed deprecated theme appearance logic from various components and files, streamlining the codebase.
  • Added internationalization support for theme appearance settings across multiple languages.
  • Enhanced the UI to reflect user-selected theme preferences dynamically.
image image image

CORE-1554

Summary by CodeRabbit

  • New Features

    • New Theme preference in Settings > General: Auto (follow system), Light, Dark.
    • Preference is saved globally and persists across sessions.
    • Theme selection localized in 20+ languages.

  • Bug Fixes

    • Centralized theme handling to prevent inconsistent per-server theme behavior.

✏️ Tip: You can customize this high-level summary in your review settings.

@jeanfbrito
feat: Implement user theme preference settings and remove legacy them…
29a50ed 
…e appearance handling

- Introduced a new `ThemeAppearance` component to manage user theme preferences, allowing selection between 'auto', 'light', and 'dark' themes.
- Updated state management to include `userThemePreference`, replacing the previous `themeAppearance` handling.
- Removed deprecated theme appearance logic from various components and files, streamlining the codebase.
- Added internationalization support for theme appearance settings across multiple languages.
- Enhanced the UI to reflect user-selected theme preferences dynamically.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Dec 8, 2025 •
edited
Loading

Walkthrough

Implements a global user theme preference: adds persisted userThemePreference ('auto'|'light'|'dark'), new reducer and action, removes per-server theme fields and handling, updates UI components to use the global preference, and adds i18n strings for theme appearance across multiple locales.

Changes

Cohort / File(s) Summary
Persisted State & Redux
src/app/PersistableValues.ts, src/app/selectors.ts, src/ui/actions.ts, src/ui/reducers/userThemePreference.ts, src/store/rootReducer.ts		 Add persisted version 4_10_0 with userThemePreference. New SETTINGS_USER_THEME_PREFERENCE_CHANGED action replaces WEBVIEW_USER_THEME_APPEARANCE_CHANGED. New reducer manages 'auto'
Internationalization (i18n)
src/i18n/{ar,de-DE,en,es,fi,fr,hu,it-IT,ja,nb-NO,nn,no,pl,pt-BR,ru,se,sv,tr-TR,uk-UA,zh-CN,zh-TW,zh}.i18n.json		 Add themeAppearance block under settings (title, description, auto, light, dark) across many locale files to provide localized UI strings for theme selection.
Theme Settings UI
src/ui/components/SettingsView/GeneralTab.tsx, src/ui/components/SettingsView/features/ThemeAppearance.tsx		 Introduce ThemeAppearance component rendering a Select for theme preference; reads userThemePreference from Redux and dispatches preference change action. Inserted into GeneralTab.
Shell & Theme Application
src/ui/components/Shell/index.tsx, src/ui/components/TopBar/index.tsx		 Shell now derives current theme from global userThemePreference (uses machine theme when 'auto'). TopBar uses new isTransparentWindowEnabled selector to compute background styling.
Server Components
src/ui/components/ServersView/DocumentViewer.tsx, src/ui/components/ServersView/ServerPane.tsx, src/ui/components/ServersView/index.tsx		 Remove themeAppearance prop and theme-dependent rendering from server view components; apply simplified/static styling instead.
Server Configuration & Reducers
src/servers/common.ts, src/servers/preload/themeAppearance.ts, src/servers/reducers.ts		 Remove themeAppearance from Server type, make setUserThemeAppearance a no-op, and remove WEBVIEW_USER_THEME_APPEARANCE_CHANGED action and reducer handling.
Initialization
src/injected.ts		 Remove reactive logic that applied per-server theme preferences during startup; theming now handled by global preference system.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Settings as Settings UI
    participant Redux as Redux Store
    participant Shell as Shell Component
    participant System as OS Theme

    User->>Settings: Choose theme (auto / light / dark)
    Settings->>Redux: Dispatch SETTINGS_USER_THEME_PREFERENCE_CHANGED
    Redux->>Redux: userThemePreference reducer updates state
    Redux-->>Shell: State change notification
    alt userThemePreference == "auto"
        Shell->>System: Query machineTheme
        System-->>Shell: machineTheme
        Shell->>Shell: currentTheme = machineTheme
    else
        Shell->>Shell: currentTheme = userThemePreference
    end
    Shell->>Shell: Apply currentTheme to UI
    Shell-->>User: Theme updated globally
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

Poem

🐰 I twitch my nose at light and dark,

A tiny hop from server to heart,
One setting now guides every view,
Auto, light, or night so true,
Hop on—this theme is yours to start!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The PR title clearly and concisely summarizes the main feature being implemented: user theme preference settings.
Linked Issues check ✅ Passed The PR addresses theme preference management by adding a new component, updating state management, and removing deprecated logic, aligning with the theme sync objective.
Out of Scope Changes check ✅ Passed All changes are directly related to implementing user theme preference settings, including UI components, state management, internationalization, and deprecating old theme handling.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch add-theme-selection

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@jeanfbrito
fix(i18n): Correct Norwegian translation for theme appearance descrip…
538abcb 
…tion
@jeanfbrito
fix(theme): Validate theme preference values before dispatching
ab8b899 
- Updated the `handleChangeTheme` function to include validation for theme preference values, ensuring only 'auto', 'light', or 'dark' are accepted. This change prevents invalid values from being dispatched, enhancing the robustness of the theme management logic.