Improve the color scheme #92

New issue

Closed

opened 2026-05-22 14:05:52 +00:00 by HenrikeW · 0 comments

HenrikeW commented

2026-05-22 14:05:52 +00:00

(Migrated from github.com)

Please describe the feature

As a website user, I want a website in colors that harmonize with each other and clearly communicate hierarchy so that I don't get confused by the UI.

Detailed description

There are several smaller issues that could be improved in the color scheme:

the "info" color has a light shade generated by Bootstrap that gives a "danger" impression. It should be more neutral (described in issue #82)
The "secondary" color is very close to the "primary" color, especially in the variants that bootstrap auto-generates, e.g. "primary-subtle" (see screenshot below). I suggest that we choose another secondary color, that is very different from the primary to avoid having shades of blue that are similar but not quite the same.
Related to that, the auto-generated "hover" shade of the secondary color is very close to the color itself so that it's hard to see which page you're on in the pagination component (see screenshot).

A/C:

Find a more neutral info color
Find a different secondary color that doesn't interfere with the primary one
- E.g. there needs to be a good distinction between active and inactive items.
Make adjustments in the code if needed

Additional context

I think it comes down to the fact that the base hue of the secondary color should have a high saturation, no matter what color it is.

Screenshots

"secondary" vs. "primary-subtle" in the duplicated "created"-badge. Similar but not quite the same:

"Hover" state on "30"-button: very hard to see.

## Please describe the feature  As a website user, I want a website in colors that harmonize with each other and clearly communicate hierarchy so that I don't get confused by the UI. ## Detailed description There are several smaller issues that could be improved in the color scheme: - the "info" color has a light shade generated by Bootstrap that gives a "danger" impression. It should be more neutral (described in issue #82) - The "secondary" color is very close to the "primary" color, especially in the variants that bootstrap auto-generates, e.g. "primary-subtle" (see screenshot below). I suggest that we choose another secondary color, that is very different from the primary to avoid having shades of blue that are similar but not quite the same. - Related to that, the auto-generated "hover" shade of the secondary color is very close to the color itself so that it's hard to see which page you're on in the pagination component (see screenshot). A/C: - [x] Find a more neutral info color - [x] Find a different secondary color that doesn't interfere with the primary one - E.g. there needs to be a good distinction between active and inactive items. - [x] Make adjustments in the code if needed ## Additional context I think it comes down to the fact that the base hue of the secondary color should have a high saturation, no matter what color it is. ## Screenshots "secondary" vs. "primary-subtle" in the duplicated "created"-badge. Similar but not quite the same: <img width="920" src="https://api.zenhub.com/attachedFiles/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNmY5RFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c1684f97ae9a9161d44d6d4e1c290562912a3391/image.png" alt="image.png" /> "Hover" state on "30"-button: very hard to see. <img width="888" src="https://api.zenhub.com/attachedFiles/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNm45RFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d42a54e1e1320e553b6823a478891c5564fbe94d/image.png" alt="image.png" />