CSS Variables Customizer
This module lets you easily customize your theme's CSS variables without needing to redeploy your site. It automatically discovers CSS variables defined with specific annotations in your theme files, allowing you to preview and adjust them through an administrative interface.
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:
- Beginning: @css-variables-customizer-category category . Replace category with any name, it will be displayed in UI.
- 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.