Color schemes

Use the build in color schemes.

Saas UI Pro comes with a helper function that makes it easy to create your own custom color schemes.

The current build-in color schemes next to the base theme are earth and galaxy.

// packages/ui-theme/src/theme.ts
import { extendTheme } from '@chakra-ui/react'


import { theme as baseTheme } from '@saas-ui/pro/theme'
import { withThemeColors } from '@saas-ui/pro'


import components from './components'


import colorScheme from './color-schemes/galaxy'


export const theme = extendTheme(
  {
    components,
  },
  /**
   * Uncomment this to use any of the build in color schemes.
   */
  withThemeColors(colorScheme),
  baseTheme
)

Was this helpful?