---
title: カラーモード
description: "Yamada UIは、カラーモードに応じてスタイルを変更する機能を提供しています。"
---

## 概要

Yamada UIには、アプリケーションのカラーモードを管理するためのサポートが組み込まれており、簡単にライトモードとダークモードを切り替えることができます。また、提供しているすべてのコンポーネントは、ダークモードをサポートしています。

:::info
デフォルトのカラーモードを変更したい場合は、[こちら](https://yamada-ui.com/docs/theming/color-mode.md)をご覧ください。
:::

## 使い方

カラーモードを[Style Props](https://yamada-ui.com/docs/styling/style-props.md)に適用するには、配列を設定します。

- 最初の要素にライトモードの値を設定します。
- 最後の要素にダークモードの値を設定します。

```tsx
<Box p="md" bg={["success", "warning"]} color="white">
  Box
</Box>
```

## ユーティリティ

Yamada UIには、カラーモードの便利なカスタムフックを提供しています。

- [useColorMode](https://yamada-ui.com/docs/hooks/use-color-mode.md): 現在のカラーモードを返すカスタムフックです。
- [useColorModeValue](https://yamada-ui.com/docs/hooks/use-color-mode-value.md): 提供された値から現在のカラーモードの値を返すカスタムフックです。