カラーモード
Yamada UIは、カラーモードに応じてスタイルを変更する機能を提供しています。
概要
Yamada UIには、アプリケーションのカラーモードを管理するためのサポートが組み込まれており、簡単にライトモードとダークモードを切り替えることができます。また、提供しているすべてのコンポーネントは、ダークモードをサポートしています。
デフォルトのカラーモードを変更したい場合は、こちらをご覧ください。
使い方
カラーモードをStyle Propsに適用するには、配列を設定します。
- 最初の要素にライトモードの値を設定します。
- 最後の要素にダークモードの値を設定します。
Box
<Box p="md" bg={["success", "warning"]} color="white">
Box
</Box>
ユーティリティ
Yamada UIには、カラーモードの便利なカスタムフックを提供しています。