Skip to content

Theming

Learn how to create and customise a theme.

Create a theme

Creating your first theme is as simple as calling the createTheme function. It's ready to go out-of-the-box with the default theme. The next few sections will show you how to customise the theme to match your brand.

Customise a theme

Themes are built on a set of core tokens or Foundations. These tokens correspond to raw values, such as a font size or hex value. Tokens that reference other tokens are called dynamic tokens. This means you can generate a theme for your brand based on a set of core tokens. These are outlined below and are easy to override.

Our approach to theming is to set default values and then allow you to override the theme.

Themes are combined with a deep merge. This will update any dynamic tokens. When you add custom theme values you should also provide the typings.

It is also possible to pass additional values when creating a theme, this can be useful when importing from a shared library - defaults for your brand for example.

CSS Reset

You will need to import the css reset in order for the theme to display components correctly. It will adjust the font size of the page to make it easier to work with rems. Rem Units in CSS (opens in new window) 

Custom Colours

Brand specific colours can be added to the theme, we recommend keeping these under a brand key in the theme.

Custom Typography

You can customise typography by changing existing values or adding your own. We advise to keep font weights to typography conventions, such as semi-bold being aliased to 600.

You should ensure custom fonts are loaded in order for them to work.