Customization

To change the prefix of CSS variables, set the value to css.varPrefix.

• 1

  Generate a Theme

  Use the CLI to generate a theme.

  Before running the following commands, you need to install @yamada-ui/cli and execute the init command. For more details, please see here.

  pnpmnpmyarnbun

  pnpm yamada-cli theme
  

• 2

  Change the Config

  Change the config.ts in the generated theme.

  theme/config.ts

  import { defineConfig } from "@yamada-ui/react"
  
  export const config = defineConfig({
    css: { varPrefix: "custom" }, 
    breakpoint: { direction: "down", identifier: "@media screen" },
    defaultColorMode: "dark",
    defaultThemeScheme: "base",
    notice: { duration: 5000 },
    theme: { responsive: true },
  })
  

• 3

  Update the Provider

  Set the generated theme to UIProvider.

  import { UIProvider } from "@workspaces/ui"
  import { theme, config } from "@workspace/theme"
  
  const App = () => {
    return (
      <UIProvider theme={theme} config={config}>
        <YourApplication />
      </UIProvider>
    )
  }