extendTheme
Function used to customize theme components styles.
The extendTheme
takes in the current theme you pass and returns an updated theme with added styles and configurations.
With extendTheme
you can add more variants and sizes to these components.
Adding new variant
You can only add a new variant to the theme, and you should not override variant in the current theme.
const theme = extendTheme(someStyles, currentTheme);
Usage
Import
To import the funtion you just have to use this code below.
import { extendTheme } from '@marigold/system';
Examples
Customzing the base styles of a component
Here in this example we will customize the background of Button
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 wich 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