Theme Preview Thumbnails Display Incorrect Colors for Specific Themes
- Dominant language
- TypeScript
- Stars
- 40k
- Forks
- 2.4k
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 61
Description
### Expected Behavior
When viewing the theme selector in Preferences > Themes, all theme preview thumbnails should accurately represent how each theme actually looks, regardless of which theme is currently active.
For example:
- "Designer Light" should always display with a light background in its preview thumbnail
- "Simple Light" should always display with a light background in its preview thumbnail
- "Purple" should display with its correct purple color scheme
### Actual Behavior
When the "Hyper" theme is active, the preview thumbnails for three specific themes display incorrect colors:
1. "Designer Light" - appears as a dark theme in the preview, but it's actually a light theme
2. "Simple Light" - appears incorrectly in the preview
3. "Purple" - appears with incorrect colors in the preview
The theme preview thumbnails for these three themes seem to be influenced by the Hyper theme's color scheme, making it confusing to choose themes since the previews don't accurately represent what the theme will look like.
### Reproduction Steps
1. Open Insomnia Preferences (Application > Preferences)
2. Navigate to the "Themes" tab
3. Select the "Hyper" theme
4. Observe the preview thumbnails for "Designer Light", "Simple Light", and "Purple" themes
5. Notice that all three display with incorrect colors (e.g., "Designer Light" shows dark colors instead of light colors)
6. You can verify by switching to "Designer Light" - it actually renders as a light theme, not how the preview showed it
### Is there an existing issue for this?
- [x] I have searched the [issue tracker](https://www.github.com/Kong/insomnia/issues) for this problem.
### Which sync method do you use?
- [ ] Git sync.
- [ ] Insomnia Cloud sync.
- [x] Local only
### Additional Information
This appears to be a CSS/rendering issue where the theme preview thumbnails for "Purple", "Simple Light", and "Designer Light" inherit or are affected by the Hyper theme's color variables, rather than displaying with their own independent color schemes.
### Insomnia Version
12.3.0
### What operating system are you using?
Windows
### Operating System Version
Windows 11 version 25H2
### Installation method
insomnia.rest
### Last Known Working Insomnia version
_No response_
Contributor guide
Research direction
Start in Insomnia's Preferences > Themes UI and reproduce the issue with the Hyper theme active. Inspect how preview thumbnails render theme colors and isolate them from the active theme; done means Designer Light, Simple Light, and Purple consistently show their own correct colors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100