Themes refactor Examples and research #829

New issue

Closed

opened 2026-05-08 06:58:58 +00:00 by c24danli · 2 comments

c24danli commented

2026-05-08 06:58:58 +00:00

Collaborator

In preperation for refactoring the theme, we have this issue as research and to test diffrent implimentations

c24danli added the

research

label

2026-05-08 06:58:58 +00:00

b23albst was assigned by c24danli

2026-05-08 06:59:10 +00:00

b23albst commented

2026-05-08 07:16:57 +00:00

Collaborator

I have made an example on this branch.

Here are the things I think we need to do:

1. Refactor the theme.css file.

It has never had a clear purpose, and thus there is a lot of random stuff in it. The root class should preferably contain things that are static across all themes. In the example branch. I've gone quite far with adding things that could be the same if we want a uniform website. The bare minimum I think are variables for neutral backgrounds, variables for text colors and the typography.

The only things that would change with the themes are the variables for primary and secondary color, and things like their hover colors.

Since the old variables are frequently used, almost all of the components' css would need to be somewhat changed.

2. Have a concrete guide for how primary and secondary colors are to be used.

We need to decide what component/type of components should use primary and secondary color, as well as whatever variables end up in the root class.

We should also decide what the secondary color is. In the examples @a22erigr sent, there is no clear secondary color. If we want to have maximum contrast, the secondary should be a complementary color to the first one. However, I think this looks bad in a lot of cases. In the test branch, I've just used hues of the primary colors as secondary.

Conclusion

The example branch is quite ambitious, and I do not think we necessarily have to go that far. I think the bare minimum is:

Change the background colors of cards to be white/gray. This will mean we won't have any problems with contrast, regardless of the cards content.

I have made an example on this [branch](https://git.webug.se/Andras/BoundlessFlowCampus2K/src/branch/color-tech-test). Here are the things I think we need to do: ### 1. Refactor the theme.css file. It has never had a clear purpose, and thus there is a lot of random stuff in it. The root class should preferably contain things that are static across all themes. In the example branch. I've gone quite far with adding things that could be the same if we want a uniform website. The bare minimum I think are variables for neutral backgrounds, variables for text colors and the typography. The only things that would change with the themes are the variables for primary and secondary color, and things like their hover colors. Since the old variables are frequently used, almost all of the components' css would need to be somewhat changed. ### 2. Have a concrete guide for how primary and secondary colors are to be used. We need to decide what component/type of components should use primary and secondary color, as well as whatever variables end up in the root class. We should also decide what the secondary color is. In the examples @a22erigr sent, there is no clear secondary color. If we want to have maximum contrast, the secondary should be a complementary color to the first one. However, I think this looks bad in a lot of cases. In the test branch, I've just used hues of the primary colors as secondary. ### Conclusion The example branch is quite ambitious, and I do not think we necessarily have to go that far. I think the bare minimum is: - Change the background colors of cards to be white/gray. This will mean we won't have any problems with contrast, regardless of the cards content.

b23albst added the

label

2026-05-20 13:58:46 +00:00