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 { extendTheme } from '@chakra-ui/react'
import {
  theme as baseTheme,
  /* withThemeColors */
} from '@saas-ui-pro/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 { withColorScheme, theme as baseTheme } from '@saas-ui-pro/react'
import colorScheme from './color-schemes/galaxy'


export const theme = extendTheme(
  {
    semanticTokens,
    components,
  },
  withColorScheme(colorScheme),
  baseTheme
)

Was this helpful?