extendTheme

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

Preview

Code

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 .

Preview

Code

profile

notifications

private

This panel displays your profile settings. You can upload a profile picture, write a brief bio to introduce yourself, and update other personal details. Show the world who you are and make a memorable impression on other platform users.

Adding new variants and sizes to a component

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

Preview

Code

Last update: June 28, 2024

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

Preview

Code

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 .

Preview

Code

profile

notifications

private

Adding new variants and sizes to a component

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

Preview

Code

Last update: June 28, 2024