White Labeling

The ThemeProvider component accepts a theme prop, which sets the theme context for all child components. The default value of the theme prop is the outkit theme.

If you want to add white labelling, you can simply manipulate the outkitTheme.color object with your desired colors and pass that into ThemeProvider.

Make sure to generate all of the color range values between 50 - 900 as different values are used for different components.

Demo

import { ThemeProvider, outkitTheme } from '@outfit/outfit';