Update theme accent color to cyan and remove gradients for flat design#647
Conversation
ghost
commented
Dec 6, 2025
|
Please make it into an alternative standalone style, and handle all themed components to look uniform. |
There was a problem hiding this comment.
Pull request overview
This pull request updates the theme's accent color from dark purple/slate blue (rgb(72, 61, 139)) to cyan (rgb(93, 187, 204)), which matches the application's logo. The update also modernizes the design by removing gradient backgrounds in favor of a flat design aesthetic. The changes span the QSS stylesheet template, the generated stylesheet, and the compiled binary resources.
Key changes:
- Replaced primary border color from
#483d8b(dark purple) to#5dbbcc(cyan) - Replaced highlight border color from
#5246a0to#7fd4e0(lighter cyan) - Removed all
qlineargradientdeclarations, replacing them with solid colors - Updated comments to reflect "flat backgrounds" instead of "gradient backgrounds"
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
rare/resources/stylesheets/RareStyle/template.qss |
Updated color definitions, replaced purple theme with cyan, removed gradient backgrounds, updated alpha blend calculations |
rare/resources/stylesheets/RareStyle/stylesheet.qss |
Applied color changes from template to generated stylesheet, removed all gradient declarations |
rare/resources/stylesheets/RareStyle/__init__.py |
Regenerated binary Qt resource file to reflect the stylesheet changes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| border-color: rgb( 93, 187, 204); | ||
| padding: 1px; | ||
| background-color: rgb( 42, 40, 63); | ||
| background-color: rgb( 55, 81, 88); |
There was a problem hiding this comment.
This background color should be rgb( 47, 72, 79) instead of rgb( 55, 81, 88) to correctly represent rgba(93, 187, 204, 25%) blended over the background rgb(32, 34, 37).
| border-color: rgb( 93, 187, 204); | ||
| padding: 1px; | ||
| background-color: rgb( 42, 40, 63); | ||
| background-color: rgb( 55, 81, 88); |
There was a problem hiding this comment.
This background color should be rgb( 47, 72, 79) instead of rgb( 55, 81, 88) to correctly represent rgba(93, 187, 204, 25%) blended over the background rgb(32, 34, 37).
| background-color: rgb( 55, 81, 88); | |
| background-color: rgb( 47, 72, 79); |
| normal: #483d8b rgb( 72, 61, 139) -- border color for most widgets | ||
| rgba( 72, 61, 139, 25%) == rgb( 42, 40, 63) | ||
| normal: #5dbbcc rgb( 93, 187, 204) -- border color for most widgets (cyan from logo) | ||
| rgba( 93, 187, 204, 25%) == rgb( 55, 81, 88) |
There was a problem hiding this comment.
The calculated RGB value for rgba(93, 187, 204, 25%) blended over the background rgb(32, 34, 37) is incorrect.
Correct calculation:
- Red: 93 × 0.25 + 32 × 0.75 = 23.25 + 24 = 47.25 ≈ 47
- Green: 187 × 0.25 + 34 × 0.75 = 46.75 + 25.5 = 72.25 ≈ 72
- Blue: 204 × 0.25 + 37 × 0.75 = 51 + 27.75 = 78.75 ≈ 79
The value should be rgb( 47, 72, 79) instead of rgb( 55, 81, 88).
This also affects line 410 where this calculated color is used as a background-color.
| stop: 1 rgb( 32, 34, 37)); | ||
| */ | ||
| background-color: rgb( 42, 40, 63); | ||
| background-color: rgb( 55, 81, 88); |
There was a problem hiding this comment.
This background color should be rgb( 47, 72, 79) instead of rgb( 55, 81, 88) to correctly represent rgba(93, 187, 204, 25%) blended over the background rgb(32, 34, 37). See the comment on line 16 for the calculation details.
| background-color: rgb( 55, 81, 88); | |
| background-color: rgb( 47, 72, 79); |
|
The layout changes are irrelevant this this PR, I do not want this PR to touch RareStyle. If you want an alternative stylesheet, then create a new one. I don't mind basing it on RareStyle, but I do not want the default style to change at this point. |