---
title: カスタマイズ
description: "Yamada UIのテーマをカスタマイズする方法を学ぶ。"
---

## セットアップ

### テーマを生成する

[CLI](https://yamada-ui.com/docs/theming/cli.md)を使用してテーマを生成します。

:::warning
下記のコマンドを実行する前に、`@yamada-ui/cli`をインストールして`init`コマンドを実行する必要があります。詳しくは、[こちら](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
```

### プロバイダーを更新する

生成したテーマを`UIProvider`に設定します。

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

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

## カラースキームを変更する

プロジェクト全体で適用されるカラースキームを変更する場合は、`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",
  },
})
```

## カラースキームを追加する

プロジェクトで使用するカラースキームを追加する場合は、`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",
})
```

## アプリケーションの背景色を変更する

アプリケーションの背景色を変更する場合は、`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",
  },
  ...
})
```