テーマの概要

テーマコンポーネントを使用して、UIのルックアンドフィールを変更します。

構成要素

このテーマコンポーネントは、アプリケーション全体の視覚的な外観を定義します。最小限の設定オプションを渡すことでカスタマイズできます。

<Theme
  accentColor="mint"
  grayColor="gray"
  panelBackground="solid"
  scaling="100%"
  radius="full"
>
  <ThemesVolumeControlExample />
</Theme>

使い始めるための調整済みデフォルトセットが提供されていますが、利用可能なすべてのオプションを試して、アプリケーションに最適な視覚スタイルを見つけることを恐れないでください。各オプションがどのような効果を持つのかを確認するには、Playgroundをご覧ください。

バリアント

バリアントは、視覚的な階層を作成し、相対的な重要性を伝えるために使用される、コンポーネントの視覚的なバリエーションです。

各コンポーネントは異なるバリアントセットを提供しますが、すべて互換性があり、互いを補完するように設計されています。

<Flex gap="3" align="center">
  <Button variant="classic">
    Get started <ArrowRightIcon />
  </Button>
  <Button variant="solid">
    Get started <ArrowRightIcon />
  </Button>
  <Button variant="soft">
    Get started <ArrowRightIcon />
  </Button>
</Flex>

例

コンポーネントのバリアントとカスタマイズされたテーマ設定を組み合わせることで、多数のユニークなインターフェースを作成できます。

たとえば、次のようなものを作成できます。

• 音楽アプリケーション
• eコマース製品要素
• SaaSダッシュボード

その他無数の異なる処理とスタイル。

トークン

トークンはテーマ値への直接アクセスを提供し、独自のテーマ付きコンポーネントを構築およびカスタマイズするための柔軟性を提供します。

利用可能なすべてのテーマトークンについては、ソースコードを参照するか、関連するテーマページで各トークンの種類について詳しく読むことができます。