---
title: Customization
description: "Learn how to customize the theme of Yamada UI."
---

## Setup

### Generate a Theme

Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme.

:::warning
Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md).
:::

```bash
pnpm yamada-cli theme
```

```bash
npm yamada-cli theme
```

```bash
yarn yamada-cli theme
```

```bash
bun yamada-cli theme
```

### Update the Provider

Set the generated theme to `UIProvider`.

```tsx
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`.

```tsx
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", // [!code highlight]
    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`.

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

export const colorSchemes = defineSemanticTokens.colorSchemes({
  accent: "cyan", // [!code highlight]
  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`.

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

export const colors = defineSemanticTokens.colors({
  ...
  black: {
    base: "#000000", // [!code highlight]
    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", // [!code highlight]
    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",
  },
  ...
})
```