Color Swatch

This is an alternative for the Drupal Core color module and color scheme. In my personal opinion this is somewhat more flexible. The reason is that the generated css is not compiled as a file (could be added perhaps later if this would have clear benefits), but added as inline css.

Also the css works through rendering of a twig file with a theme function. Which gives more control from preprocess functions, and twig template overrides on a theme level.

The swatches and settings can be defined in the theme info.yml which is easier for a lot of themers instead of writing php.

And we have a hook to change the active swatch if you want to apply some custom logic in your project.

The core color module generates a color.css file. A single file, no variants or something. Also it does a lot of stuff with images and image slices. Feels a bit outdated in this day and age.

This module is purely focused on supplying a css with the chosen colors. Which works excellent using css custom properties for instance.

How it works:

Add something like this in your themes info.yml.

color-swatch:
  placeholders:
    - primary
    - secondary
    - tertiary
  default: 'default'
  swatches:
    default:
      primary: '#FFFFFF'
      secondary: '#FFFF00'
      tertiary: '#FF0000'

What you do is
- define a set of placeholders, that you can use in a twig file (color-swatch-css.html.twig) to generate your own css.
- define a set of available default swatches with colors for the defined placeholders.
- choose a default from these swatches.

This results in a new set of form fields in your themes form. To determine one of the available swatches, or create a custom swatch through the ui.

You can override the twig file that generates the css with this file color-swatch-css.html.twig in you theme. The default template looks like this:

:root {
{% for placeholder in color_swatch.placeholders() %}
  --color-{{ placeholder }}: {{ color_swatch.hex(placeholder) }};
  --color-{{ placeholder }}-hue: {{ color_swatch.hue(placeholder) }}deg;
  --color-{{ placeholder }}-lightness: {{ color_swatch.lightness(placeholder) }}%;
  --color-{{ placeholder }}-saturation: {{ color_swatch.saturation(placeholder) }}%;
  --color-{{ placeholder }}-contrast-ratio:{{ color_swatch.contractRatio(placeholder) }};
  --color-{{ placeholder }}-rgb: rgb({{ color_swatch.rgb(placeholder).r }}, {{ color_swatch.rgb(placeholder).g }}, {{ color_swatch.rgb(placeholder).b }})
{% endfor %}
}

The generated css is than included inline in your html output of the page.