Daffodil's extensible theming architecture allows you to customize our components to match your brand or product's visual style using a set of universal variables, eliminating the need for individual component modifications.
Daffodil Design is built with Sass, so you should be familiar with CSS and Sass fundamentals such as variables, functions, and mixins.
A theme must be configured in order for Daffodil components to render correctly. Daffodil Design provides a default theme, but it is not included automatically and must be added to your styles.
Configure a theme using the daff-component-themes mixin. This mixin includes styles for all components.
The example below demonstrates how to add Daffodil Design’s default theme.
Add it to your styles.scss file to apply styles globally:
@use '@daffodil/design/scss/theme' as daff-theme;
@use '@daffodil/design/scss/theme/default' as daff-default-theme;
@include daff-theme.daff-component-themes(daff-default-theme.$theme);
This applies the light theme only. To support both light and dark modes, see the modes documentation.
To learn more about theming, see: