Alternative Color
Altcolor provides a modern way for themes to allow users to customize colors. It enables users to easily adapt a theme's appearance to match their brand by letting them change specific color values defined by the theme.
This module is a modern alternative to the deprecated Color module that used to be in Drupal core. It allows supported themes to be recolored and to display the theme in an alternative color. This makes it easy for users to adapt a theme to match the colors of their brand or logo.
Requirements
This module requires a supported theme. That is a theme with a THEME.colors.yml file which would look something like this:
THEMENAME:
colors:
base_primary_color: 'Primary base color'
schemes:
default:
label: 'Blue Lagoon'
colors:
base_primary_color: '#1b9ae4'
Working
This module will read the color information as defined by the theme builder. It will then allow the user to change these colors on the theme settings page and inject these colors back into the page as CSS variables.
The above colors file will inject in the HTML style tag as follows:
<html style="--color-base-primary-color: #1b9ae4;">
Theme builders
Theme builders can use this to make it easy for their users to display a theme in their own brand colors by making use of the same CSS variables.
:root {
--color-base-primary-color: yellow;
}
body {
background-color: var(--color-base-primary-color);
}After the color is changed on the theme settings form, the value defined in the style tag will take precedence over the yellow that was defined in the CSS file and the background will be blue (#1b9ae4) instead.
This makes it very easy to make a theme compatible. All that a theme developer needs to do is to write the THEME.colors.yml and define color variables as --color-VARNAME. No need to write additional CSS/JS as with the previous color module.
Derived (relative) colors
The CSS color module 5 standard describes relative colors, which offers the ability to create one color based on another. This makes it easier to for example lighten a color in pure CSS:
:root {
--color-base-primary-color: #1b9ae4;
--color-base-primary-color-light: hsl(from var(--color-base-primary-color) h s calc(l + 10%));
}
Browser support for relative colors is growing steadily. Should you need legacy browser support, the hook_altcolor_alter_colors hook can be used to add additional derived colors directly in the style tag. Third party PHP libraries can be used to modify colors (shift hue, lighten, darken, etc).
function HOOK_altcolor_alter_colors($theme, &$colors) {
$base_primary_color = $colors['base-primary-color'];
// Caclulate a lighter color with third party library.
$base_primary_color_light = 'SOME_COLOR';
// Add additional colors to the array.
// Make derived --color-base-primary-color-light available in the CSS.
$colors['base-primary-color-light'] = $base_primary_color_light;
}