Configure your theme
How to configure and customize your theme.
Configure your theme
You can find you base theme in packages/theme, this is where you can customize
your theme.
Read more about theme customization on the Chakra UI website.
import { theme as baseTheme } from /* withThemeColors */ '@saas-ui-pro/react'
import { extendTheme } from '@saas-ui/react'
// import { theme as glassTheme } from '@saas-ui-pro/theme-glass'
import { components } from './components'
import semanticTokens from './foundations/semantic-tokens'
// import colorScheme from './color-schemes/galaxy'
// import colorScheme from './color-schemes/earth'
export const theme = extendTheme(
{
semanticTokens,
components,
},
/**
* Uncomment this to use any of the built-in color schemes.
*/
// withThemeColors(colorScheme),
// glassTheme,
baseTheme,
)The theme extends the Saas UI Pro default theme and includes a set of semantic tokens and custom component styles.
Glass theme
To use the glass theme, replace the baseTheme with glassTheme.
export const theme = extendTheme(
{
semanticTokens,
components,
},
glassTheme,
)Color schemes
The project ships with a number of color schemes that you can use out of the box. Color schemes are different from themes, they only change the color palette of the theme.
To use a color scheme, import it and pass it to the withThemeColors function.
import { theme as baseTheme, withColorScheme } from '@saas-ui-pro/react'
import colorScheme from './color-schemes/galaxy'
export const theme = extendTheme(
{
semanticTokens,
components,
},
withColorScheme(colorScheme),
baseTheme,
)