Custom theming

Set up dark mode or multiple themes in minutes.

You can create additional themes that override your default tokens.

const { styled, css } = createCss({
theme: {
colors: {
hiContrast: 'hsl(206,10%,5%)',
loContrast: 'white',
gray100: 'hsl(206,22%,99%)',
gray200: 'hsl(206,12%,97%)',
gray300: 'hsl(206,11%,92%)',
gray400: 'hsl(206,10%,84%)',
gray500: 'hsl(206,10%,76%)',
gray600: 'hsl(206,10%,44%)',
},
},
space: {},
fonts: {},
});

You can create new themes with the theme function.

const { theme } = createCss({...});
const darkTheme = theme({
colors: {
hiContrast: 'hsl(206,2%,93%)',
loContrast: 'hsl(206,8%,8%)',
gray100: 'hsl(206,8%,12%)',
gray200: 'hsl(206,7%,14%)',
gray300: 'hsl(206,7%,15%)',
gray400: 'hsl(206,7%,24%)',
gray500: 'hsl(206,7%,30%)',
gray600: 'hsl(206,5%,53%)',
},
space: {},
fonts: {},
});

The darkTheme const represents a hashed class, which can be added at any point in your application.

You can define the theme class to used by passing it as the first argument:

export const darkTheme = theme('dark-theme', {...});
<div className={darkTheme}>
<Box>Content nested in dark theme.</Box>
</div>

The theme is an object containing useful token data.

For example, given the following default theme and dark themes:

const { theme } = createCss({
theme: {
colors: {
primary: 'black',
},
},
});
const dark = theme({
colors: {
primary: 'white',
},
});

You can use the returned theme objects to read the tokens, like so:

// default theme
theme.colors.primary.value; // black
theme.colors.primary.token; // primary
theme.colors.primary.scale; // colors
theme.colors.primary.variable; // --colors-primary
// dark theme
dark.colors.primary.value; // white
dark.colors.primary.token; // primary
dark.colors.primary.scale; // colors
dark.colors.primary.variable; // --colors-primary