Cascade Layers

Customize

• 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 type { LayersConfig } from "@yamada-ui/react"
  import { defineConfig } from "@yamada-ui/react"
  
  export const layers: LayersConfig = {
    tokens: { name: "tokens", order: 0 },
    reset: { name: "reset", order: 1 },
    global: { name: "global", order: 2 },
    base: { name: "base", order: 3 },
    size: { name: "size", order: 4 },
    variant: { name: "variant", order: 5 },
    props: { name: "props", order: 6 },
    compounds: { name: "compounds", order: 7 },
  }
  
  export const config = defineConfig({
    css: { layers, varPrefix: "ui" },
    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>
    )
  }
  

Disable

To disable the cascade layers, set css.layers to false.

import { defineConfig } from "@yamada-ui/react"

export const config = defineConfig({
  css: { layers: false, varPrefix: "ui" }, 
  breakpoint: { direction: "down", identifier: "@media screen" },
  defaultColorMode: "dark",
  defaultThemeScheme: "base",
  notice: { duration: 5000 },
  theme: { responsive: true },
})