CSS Variables Customizer

This module allows you to override the CSS variables of your site theme without having to deploy.

This is useful for sites that only require minor adjustments to the base theme, as it enables customisation without the need for deployment.

CSS variables are exposed by just wrapping your CSS variables into annotations.

Features

• Override of variables in the main CSS files of your theme.
• Override of variables of the SDCs.
• Auto discover of CSS variables through CSS comment annotations.
• Preview of changes before saving customizations.
• Support for multiple themes.
• Easy maintenance: once a variable is removed from code, it won't appear anymore in the configuration page.

Post-installation

After installation, you need to set up your theme to support customisations.

First, declare the source files of the main CSS in the .info.yml file of your theme.

css_variables_customizer:
  stylesheets:
    - cssSourceFolder
    - src/cssSpecificFile.css

In the 'stylesheets' section, it is possible to add folders.

To let the variables be discovered, they need to be wrapped in these annotations:

1. Beginning: @css-variables-customizer-category category . Replace category with any name, it will be displayed in UI.
2. End: @css-variables-customizer-category-end . Add this after the last variable you want override.

Example:

  /* @css-variables-customizer-category theme */
  --card-media-aspect: 16/9;
  --card-radius: var(--theme-radius, 0.5rem);
  --card-spacing: var(--theme-spacing, 0.25rem);
  /* @css-variables-customizer-category-end */

Clear caches, then go to /admin/appearance/css-variables-customizer. Your theme will appear in the list, allowing you to select it and override the variables.

Recommended modules/libraries

It is highly recommended to use the SDC Styleguide module to preview the component overrides.

Similar projects

UI skins allows to declare variables in a YAML file and then override them.