extendTheme

Function used to customize theme components styles.

With extendTheme you can add more variants and sizes to these components. It takes in the current theme you pass and returns an updated theme with added styles and configurations.

Adding new variant

You can only add a new variant to the theme, and you should not override variant in the current theme.

Import

import { extendTheme } from '@marigold/system';

Examples

Customzing the base styles of a component

Here in this example we will customize the background of Card component using extendTheme function

Some content

Customzing component with multiple slots

In this example we will style component with slots like Tabs component which contains slots such as container, tab, tabpanel and tabList .

Adding new variants and sizes to a component

In this example we are adding a new size medium and variant tertiary to a component