Creating Custom Themes

By default, Arcade exposes its default theme. Sometimes you might need to customize the token values to make the components align with your requirements. Currently, we don't automate creation of the themes with scripts or tooling. However, it's still possible to create custom themes manually.

Like mentioned in the Installation guide, our default theme is provided to Arcade provider with import theme from 'arcade/themes/arcade';. This means that if you copy our theme to your project, you'll be able to customize the values and then import it in the same way.

Every theme folder consists of 3 files that are originally generated with our theming engine scripts.

In the register.tsx you'll have to update the Theme component import to import { Theme } from 'arcade';. In light and dark mode variables files – you can tweak the token values, including the ones that contain PRIVATE prefix in their name.

This way you can achieve components customisation manually, until the tooling for creating themes is available.