This module provides field types for selecting colors from the official French government's Design System (DSFR) palette. It allows you to restrict available colors, choose how color codes are integrated, generate custom CSS, and validate color contrast ratios. It uses DSFR's official color variables for compatibility with light and dark modes and automatically updates colors when the DSFR library is upgraded.
Module relating to "Design Système de l'État" (DSFR (in French)) recommendations.
This module provides color selection field types based on the official DSFR palette. For each field instance, you can:
- Limit the selectable colors
- Select the color code integration method
- Wrap the selected colors into custom css code
- Enable a contrast ratio validation from a color (hexadecimal code or DSFR color name) or from another DSFR color field.
This module uses the official DSFR color variables names rather than the hexadecimal code, ensuring compatibility with both light and dark modes.
The colors are not stored within the module itself but are imported from the official DSFR sources. The colors detection is automatic (based on a cron job), there is no additional action when you upgrade the DSFR library!
Suite of modules
This module is part of a set of projects to implement DSFR (in French) in Drupal.
It is strongly recommended to use this module in addition to the base DSFR for Drupal theme.
Useful links
Other modules
This module is inspired by the Color Field module.
As the DSFR enforces a limited color palette, this module can be used to enable a broader range of color options if needed.