Color Schemes

[dtdesign]

Note: This is part of a larger initiative to overhaul the style system and the customization options in general. See #6028 to learn more.

The dark mode was among the most painful things to add to the style system because it really showed that the existing implementation is not aging well. It’s also extremely limiting that a style can only have two color schemes and one is always the dark variant. To add insult to injury, explicitly opting in to either “always dark color scheme” or “always light color scheme” is impossible, because the dark color scheme contains some hidden customization options that are not accessible otherwise.

This will also eliminate the mess that is created by styles that come in a variety of color schemes but have to be implemented as separate styles with all the drawbacks that come with them.

Potential Solution: Decouple Style from Color Scheme

Ideally, a style should be able to contain an infinite number of color schemes. Each color scheme has a dedicated option that defines if this variant is considered to be “light” or “dark”. This should toggle things like the color tint of UI element.

Mix-and-match: Light vs. Dark

The administrator should be able to define the style to be always of a certain color scheme, for example, always “light” or “dark”. If the style is set to “dynamic” it should automagically switch based on the user preferences but in that case only “light” variants may be eligible for the “light” style, and vice versa for the “dark” variant. This is due to the styling of built-in UI elements.

Unclear

• It is not enough to simply allow multiple sets of color schemes to be set up. Some aspects like images are sensitive to the color scheme and might not work with a different background color. Figure out which customization options must be bound to the style variant instead.
• Typography should remain bound to the style itself, but what about the style options outlined in #6027? It is tempting to allow options to be (optionally) customizable per variant, but this opens up a big can of worms, like, should some options be shared and others not? We need to explore this a bit to figure out the right approach.
• How do we want to support customization options like swapping out graphics provided by the style?