Themeing Enhancement: Extract and consolidate colors, create css variables

[schlawiner]

In order to ease retheming in a custom stylesheet, I extracted all the colors used in the Skosmos styles.css to CSS variables, so they can be replaced in one location (by overwriting the variable value in your custom stylesheet).

Some gray tones were so close to each other and were used in only one place that I consolidated a few into one color variable.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[kinow]

Great improvement! I used some variables in the PR to update bootstrap too, good idea 👍

[osma]

@kinow Would merging this now interfer with the development of the Bootstrap 5 update (#1182)? This seems like a very useful improvement, but I'm wondering whether to do it now or to wait for the similar changes in that PR.

[kinow]

@kinow Would merging this now interfer with the development of the Bootstrap 5 update (#1182)? This seems like a very useful improvement, but I'm wondering whether to do it now or to wait for the similar changes in that PR.

@osma , I don't mind rebasing and fixing conflicts after this change (thanks for checking though). It really seems like a great improvement.

[osma]

Thanks @schlawiner for the PR and @kinow for confirming that this doesn't cause too much trouble with the Bootstrap 5 update.

I've tested this and it seems to work well. I have some doubts about the variable naming (white-color, light-color and dark-color aren't particularly semantic...) but I don't think it makes sense to get stuck on that - we can rename those later if necessary. This is obviously a huge win for theming in any case. So I'm merging this as-is. 🎉