By default, we use our default theme create by createTheme() function. We also also create a dark theme and a welcome theme for our products.

You can customize your theme with some options:

  • customize the theme values like colors, fonts, spacing etc.
  • customize the component styles, changing the variants, sizes etc.
  • customize the global style if you want to disable or not our reset css

Customize theme values #

To create your theme, use need to add some values from object on createTheme() function.

Reset styles #

To provide consistency across browsers we provide two options:

  1. Pass useReset in the WuiProvider to use a custom reset

  2. Don't pass useReset to just reset box-sizing e.g.

Customizing component #

An example of the theme.js file for the Tag component. You can customize the variants, sizes and shapes.

You can check all our theme objects on each packages/component on file theme.js.

How to customize the component #

The entry is always in plurial (tags, buttons, etc.)

All theme values #

Here are all the possible values for your theme.
These will be merged with the default theme.