This is a followup from #3086514: Investigate use of the changing color themes for Olivero.
We want to implement color changing themes within Olivero
Olivero currently has a single blue theme (along with gray colors). We want the user to be able to change this to support their specific branding.
Plan
- This will be done through the use of theme settings to set CSS variables.
- Within #3217924: Olivero: Convert all colors (blues and grays) to HSL and normalize hues and saturations. , we will convert all of the colors to HSL format.
- We will then consolidate and rename the colors within #3217926: Olivero: Rename and consolidate all color CSS variable names.
Theme settings UX
- The site builder will navigate to the theme settings page
- Will have an option to either 1) Select color via color picker or 2) paste in a hex value
- The hex value will be saved to config
- config value will be pulled in and processed by PHP to determine hue
- Hue will then be output as CSS custom property, which will then be utilized by the CSS.
Why not use the color module?
The color module (currently) injects values directly into CSS, and is unworkable with CSS variables and the implementation that Olivero is aiming for.
Olivero’s implementation
Olivero will save a single string to config (the hex value). The interface within the theme settings will be made accessible by adding a input[type=”color] that will be kept in sync with the default input[type=”text”] that’s provided from the Form API.
Within preprocess, we extract this string, and parse it with PHP to generate the hue and saturation. These values are injected into the HTML as CSS variables. These variables, in turn, are used to generate the entire color palette.
Why not update the color module?
This is possible, but not within this theme. The Olivero theme is experimenting with these settings, and abstracting out the code with an eye toward inclusion in a new version of the color module. If and when this happens, we will provide an upgrade path.
Followup issues
- Provide accessibility contrast feedback when selecting colors
- Implement secondary color option when allowing users to select Olivero color scheme