Customization

Learn how to customize the theme of Yamada UI.

Setup

  • 1

    Generate a Theme

    Use the CLI to generate a theme.

    pnpm yamada-cli theme
  • 2

    Update the Provider

    Set the generated theme to UIProvider.

    import { UIProvider } from "@workspaces/ui"
import { theme } from "@workspace/theme"

const App = () => {
  return (
    <UIProvider theme={theme}>
      <YourApplication />
    </UIProvider>
  )
}

Change the Color Scheme

To change the color scheme that is applied to the entire project, change the styles/global-style.ts.

theme/styles/global-style.ts

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

export const globalStyle = defineStyles.globalStyle({
  "*, *::before, *::after": {
    borderColor: "border",
    borderStyle: "solid",
    borderWidth: "0",
    focusVisibleRing: "outline",
    fontFeatureSettings: '"cv11"',
    overflowWrap: "break-word",
  },
  "*::placeholder, *[data-placeholder]": {
    color: "fg.subtle",
  },
  body: {
    colorScheme: "blue", 
    bg: "bg",
    color: "fg",
    fontFamily: "body",
    lineHeight: "moderate",
    overflowX: "hidden",
    transitionDuration: "moderate",
    transitionProperty: "background-color",
  },
})

Add a Color Scheme

To add a color scheme that is used in the project, change the semantic-tokens/color-schemes.ts.

theme/semantic-tokens/color-schemes.ts

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

export const colorSchemes = defineSemanticTokens.colorSchemes({
  accent: "cyan", 
  danger: "red",
  error: "red",
  info: "blue",
  link: "blue",
  mono: ["black", "white"],
  primary: ["black", "white"],
  secondary: "gray",
  success: "green",
  warning: "orange",
})

Change the Background Color of the Application

To change the background color of the application, change the semantic-tokens/colors.ts.

theme/semantic-tokens/colors.ts

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

export const colors = defineSemanticTokens.colors({
  ...
  black: {
    base: "#000000", 
    bg: "#f8f8f8",
    contrast: "white",
    emphasized: "black.200",
    fg: "black.800",
    ghost: "black.100/50",
    muted: "black.100",
    outline: "black.900",
    solid: "black",
    subtle: "black.50",
  },
  white: {
    base: "#fafafa", 
    bg: "#161616",
    contrast: "black",
    emphasized: "white.400/50",
    fg: "white.900",
    ghost: "white.200/50",
    muted: "white.300/50",
    outline: "white.800",
    solid: "white",
    subtle: "white.200/50",
  },
  ...
})