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.
Configure a theme using the daff-component-themes mixin. This mixin includes styles for all components.
The example below demonstrates how to use Daffodil Design’s default theme.
Add it to your styles.scss file to apply styles globally:
@use '@daffodil/design/scss/theme' as daff-theme;
@include daff-theme.daff-component-themes(daff-theme.$theme);
To learn more about theming, see: