Reduce super sidebar themes
What does this MR do and why?
What
- Removes the light super sidebar themes.
- Deprecates the theme-specific color spaces and maps their values directly to the design system equivalents.
- Automatically remaps existing user selections (e.g., Light Indigo → Indigo) so no manual action is required.
Why?
This MR simplifies the theme set by removing redundant light variants and consolidating color management under the design system. It reduces maintenance overhead, ensures more consistent visuals, and creates a cleaner foundation for future enhancements – such as supporting custom theme options down the line.
Removal of light themes
We are simplifying the theme set by removing the separate light theme variants. To avoid disruption, these themes will be automatically mapped to their standard counterparts – no user action required.
- Light Indigo → Indigo (Purple)
- Light Blue → Blue
- Light Green → Green
- Light Red → Red
This change reduces redundancy in theme options while keeping the visual experience consistent and predictable. It also streamlines ongoing theme maintenance and ensures clearer alignment with our design system. Importantly, this simplification also opens the way for a future custom theme option, giving users more flexibility to tailor their experience without being tied to predefined light variants.
Color space adjustments
To ensure themes are more tightly integrated with the design system, we’ll be deprecating the existing theme-specific color spaces. Many if not all of these values were restricted to theming the super sidebar only, creating inconsistencies between color spaces of the likes of purple, blue, green and red. Instead, colors will be mapped directly to their design system equivalents, providing a single source of truth for color usage. This refactor simplifies maintenance, reduces redundancy, and ensures better visual consistency across themes and the broader product.
| Theme | Color space current | Color space after |
|---|---|---|
| Indigo | color.theme.indigo.* |
color.purple.* |
| Blue | color.theme.blue.* |
color.blue.* |
| Green | color.theme.green.* |
color.green.* |
| Red | color.theme.red.* |
color.red.* |
🎨 Visual comparison of the theme migration
| Theme | Before | After | Before Dark mode | After Dark mode |
|---|---|---|---|---|
| Indigo → Purple |  |
 |
 |
 |
| Light Indigo → Purple |  |
|
 |
 |
| Blue → Blue (DS) |  |
 |
 |
 |
| Light Blue → Blue (DS) |  |
|
 |
 |
| Green → Green (DS) |  |
 |
 |
 |
| Light Green → Green (DS) |  |
|
 |
 |
| Red → Red (DS) |  |
 |
 |
 |
| Light Red → Red (DS) |  |
|
 |
 |
Rename of themes
We’re simplifying and clarifying how themes are presented to users. The goal is to make the default choice clearer and improve consistency across the product.
- Rename: The current «Neutral» theme will be renamed to «Default» to better reflect its role as the baseline look and feel.
- Preview order: The theme previews will be reordered so that «Default» always appears first. This gives users a clearer starting point when selecting or comparing themes.
- Color representation: Update how theme colors are represented in user preferences to better align with the actual visual experience, reducing confusion and making the selection process more intuitive.
Screenshots or screen recordings
| Before | After |
|---|---|
 |
 |
 |
 |
How to set up and validate locally
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to: