カラー

カラーシステムとそのテーマへの適用について理解します。

Radix Themesには、それぞれにライト、ダーク、アルファバリアントを持つ、多数のカラースケールが付属しています。内部では、カラーシステムはRadix Colorsによって駆動されています。

アクセント

アクセントカラーは、テーマの中で最も支配的な色です。これは、プライマリボタン、リンク、その他のインタラクティブな要素に使用されます。accentColorは、Themeコンポーネントで直接指定します。

<Theme accentColor="indigo">
  <MyApp />
</Theme>

利用可能なアクセントカラー

選択できるアクセントカラーの範囲があります

グレー

ゴールド

ブロンズ

ブラウン

イエロー

アンバー

オレンジ

トマト

レッド

ルビー

クリムゾン

ピンク

プラム

パープル

バイオレット

アイリス

インディゴ

ブルー

シアン

ティール

ジェイド

グリーン

グラス

ライム

ミント

スカイ

アクセントスケールの構造

各アクセントは、各色のソリッドと透明なバリアントを含む12段階のスケールです。例えば、インディゴのカラースケールは以下のようになります。

アクセントスケールのトークン

アクセントカラートークンは、CSS変数を使用してアクセスできます。これらのトークンを使用すると、カスタムコンポーネントのスタイルを設定し、テーマの他の部分と一貫性を持たせ、アクセシビリティを確保できます。

/* Backgrounds */
var(--accent-1);
var(--accent-2);

/* Interactive components */
var(--accent-3);
var(--accent-4);
var(--accent-5);

/* Borders and separators */
var(--accent-6);
var(--accent-7);
var(--accent-8);

/* Solid colors */
var(--accent-9);
var(--accent-10);

/* Accessible text */
var(--accent-11);
var(--accent-12);

/* Functional colors */
var(--accent-surface);
var(--accent-indicator);
var(--accent-track);
var(--accent-contrast);

グレー

純粋なグレーまたは色付きのグレーのいずれかを選択できます。アクセントカラーは、それに合うグレーの色合いと自動的に組み合わされます。ただし、ThemeコンポーネントでカスタムのgrayColorを直接指定することもできます。

<Theme grayColor="mauve">
  <MyApp />
</Theme>

利用可能なグレーの色

6つのグレーから選択できます。その差は微妙に見えるかもしれませんが、特にテキストが多いページや密集したUIでは影響があります。

グレー

モーヴ

スレート

セージ

オリーブ

サンド

グレースケールの構造

グレーは、各色のソリッドと透明なバリアントを含む同じ12段階のカラースケールに基づいています。例えば、スレートのカラースケールは以下のようになります。

グレースケールのトークン

グレーのカラートークンは、CSS変数を使用してアクセスできます。これらのトークンを使用すると、カスタムコンポーネントのスタイルを設定し、テーマの他の部分と一貫性を持たせ、アクセシビリティを確保できます。

/* Backgrounds */
var(--gray-1);
var(--gray-2);

/* Interactive components */
var(--gray-3);
var(--gray-4);
var(--gray-5);

/* Borders and separators */
var(--gray-6);
var(--gray-7);
var(--gray-8);

/* Solid colors */
var(--gray-9);
var(--gray-10);

/* Accessible text */
var(--gray-11);
var(--gray-12);

/* Functional colors */
var(--gray-surface);
var(--gray-indicator);
var(--gray-track);
var(--gray-contrast);

色のオーバーライド

利用可能な場合、コンポーネントのcolorプロパティを使用して、テーマのアクセントをオーバーライドできます。ネストされたコンポーネントは、新しいアクセントカラーを自動的に継承します。

新しいコミットがあります。

<Theme accentColor="indigo">
  <Flex align="start" direction={{ initial: 'column', sm: 'row' }} gap="4">
    <Callout.Root>
      <Callout.Icon>
        <InfoCircledIcon />
      </Callout.Icon>
      <Callout.Text>
        <Flex as="span" align="center" gap="4">
          <Text>There are new commits.</Text>
          <Button variant="surface" size="1" my="-2">
            Refresh
          </Button>
        </Flex>
      </Callout.Text>
    </Callout.Root>

    <Callout.Root color="gray">
      <Callout.Icon>
        <InfoCircledIcon />
      </Callout.Icon>
      <Callout.Text>
        <Flex as="span" align="center" gap="4">
          <Text>There are new commits.</Text>
          <Button variant="surface" size="1" my="-2">
            Refresh
          </Button>
        </Flex>
      </Callout.Text>
    </Callout.Root>
  </Flex>
</Theme>

個別のカラートークン

個別の色は、対応する名前で同様のCSS変数を使用して直接アクセスできます。例えば、赤は--red-1、--red-2、そして--red-12まで同様にアクセスできます。

ハイコントラスト

ほとんどの場合、colorプロパティを持つコンポーネントには、ページの背景に対して目立つ外観を実現するhighContrastオプションも用意されています。

<Flex gap="4">
  <Button variant="classic" color="gray">
    Edit profile
  </Button>
  <Button variant="classic" color="gray" highContrast>
    Edit profile
  </Button>
</Flex>

フォーカスと選択

Radix Themesは、現在のコンポーネントのアクセントカラーに応じて、フォーカスと選択の色を自動的に調整します。ほとんどの場合、colorプロパティを設定すると、色の不一致を避けるために、フォーカスと選択の色がインテリジェントに変更されます。

アカウント設定を設定で完了してくださいアカウント設定を設定で完了してくださいアカウント設定を設定で完了してください

<Theme accentColor="indigo">
  <Flex direction="column" gap="4">
    <Text>
      Complete your account setup in <Link href="#">settings</Link>
    </Text>
    <Text color="gray">
      Complete your account setup in <Link href="#">settings</Link>
    </Text>
    <Text color="red">
      Complete your account setup in <Link href="#">settings</Link>
    </Text>
  </Flex>
</Theme>

フォーカススケールのトークン

フォーカスのカラートークンは、他のスケールと同様の命名規則に従うCSS変数を使用してアクセスできます。例えば、--focus-1、--focus-2、そして--focus-12まで同様にアクセスできます。

ほとんどのコンポーネントは、フォーカスのアウトラインの色に--focus-8を使用します。

アルファカラー

すべての色には、ページの背景に重ねて配置したときに視覚的に同じように見えるように設計されたアルファバリアントがあります。これは、色が別の背景に重ねて表示されたときに自然に見えるようにする強力なツールです。数値のカラーステップにはすべて、対応するアルファバリアントがあります。

/* Solid colors */
var(--red-1);
var(--red-2);
...
var(--red-12);

/* Alpha colors */
var(--red-a1);
var(--red-a2);
...
var(--red-a12);

アルファカラーはRadix Themesコンポーネント内で自動的に使用されます。追加の設定は必要ありません。

背景

Radix ThemesのUIで視覚的な階層を作成するために、いくつかの背景色が使用されています。これらの色は、背景、カード、その他の表面に使用されます。

/* Page background */
var(--color-background);

/* Panel backgrounds, such as cards, tables, popovers, dropdown menus, etc. */
var(--color-panel-solid);
var(--color-panel-translucent);

/* Form component backgrounds, such as text fields, checkboxes, select, etc. */
var(--color-surface);

/* Dialog overlays */
var(--color-overlay);

パネルの背景

panelBackgroundプロパティは、パネル化された要素がソリッドまたは半透明の背景色を使用するかどうかを制御します。デフォルトのtranslucent値は、微妙なオーバーレイ効果を作成します。

<Theme panelBackground="translucent">
  <MyApp />
</Theme>

サインアップ

メールアドレス

パスワードパスワードを忘れた場合

solidは、邪魔されない情報を提示したい場合に役立ちます。

<Theme panelBackground="solid">
  <MyApp />
</Theme>

サインアップ

メールアドレス

パスワードパスワードを忘れた場合

カスタマイズ

Radix Themesの色は、トークンシステムの対応するCSS変数をオーバーライドすることでカスタマイズできます。カラートークンの完全なリストについては、ソースコードを参照してください。

Radix Themesのスタイルの後にCSSが適用されるようにして、優先されるようにしてください。

ブランドカラー

対応するトークンを再マッピングすることで、特定の色をブランドカラーに置き換えることができます。通常は、テーマアクセントとして使用しているスケールのステップ9をオーバーライドします。

.radix-themes {
  --my-brand-color: #3052f6;
  --indigo-9: var(--my-brand-color);
  --indigo-a9: var(--my-brand-color);
}

この例では、ソリッドカラーのインディゴコンポーネントは、カスタムカラーを参照するようになります。

カスタムパレット

カスタムカラーパレットツールを使用して、いくつかの基準色に基づいてカスタムパレットを生成できます。結果に満足したら、生成されたCSSをプロジェクトに貼り付けます。生成された色の名前を、テーマで使用するアクセントに合わせて変更できます。

ダークテーマの色を生成するには、外観を切り替えてダークテーマを使用します。生成されたCSSを、ライトテーマの色のオーバーライドの後に貼り付けてください。

カスタムパレットを作成 →

カラーエイリアス

使用したい色合いを参照するために、一般的な色の名前を使用することを好むかもしれません。例えば、クリムゾン、ジェイド、インディゴをそれぞれ赤、緑、青と呼ぶのが一般的です。

この場合、Radix Themesのトークンを互いに置き換えて再マッピングし、使用したい色の名前を再利用できます。

.radix-themes {
  --red-1: var(--ruby-1);
  --red-2: var(--ruby-2);
  --red-3: var(--ruby-3);
  --red-4: var(--ruby-4);
  --red-5: var(--ruby-5);
  --red-6: var(--ruby-6);
  --red-7: var(--ruby-7);
  --red-8: var(--ruby-8);
  --red-9: var(--ruby-9);
  --red-10: var(--ruby-10);
  --red-11: var(--ruby-11);
  --red-12: var(--ruby-12);

  --red-a1: var(--ruby-a1);
  --red-a2: var(--ruby-a2);
  --red-a3: var(--ruby-a3);
  --red-a4: var(--ruby-a4);
  --red-a5: var(--ruby-a5);
  --red-a6: var(--ruby-a6);
  --red-a7: var(--ruby-a7);
  --red-a8: var(--ruby-a8);
  --red-a9: var(--ruby-a9);
  --red-a10: var(--ruby-a10);
  --red-a11: var(--ruby-a11);
  --red-a12: var(--ruby-a12);

  --red-surface: var(--ruby-surface);
  --red-indicator: var(--ruby-indicator);
  --red-track: var(--ruby-track);
  --red-contrast: var(--ruby-contrast);
}

この例では、Radix Themesのコンポーネントとトークンで赤の色を使用すると、元のルビーのスケールを参照するようになります。

個別のCSSファイル

色の定義は、Radix Themesが出荷するCSS全体のサイズの約20%を占めています。

CSSバンドルのサイズを削減し、使用する色だけにアクセスしたい場合は、各カラーモジュールの個別のCSSファイルをインポートできます。サンプル設定は次のとおりです。

// Base theme tokens
import '@radix-ui/themes/tokens/base.css';

// Include just the colors you use, for example `ruby`, `teal`, and `slate`.
// Remember to import the gray tint that matches your theme setting.
import '@radix-ui/themes/tokens/colors/ruby.css';
import '@radix-ui/themes/tokens/colors/teal.css';
import '@radix-ui/themes/tokens/colors/slate.css';

// Rest of the CSS
import '@radix-ui/themes/components.css';
import '@radix-ui/themes/utilities.css';

インポートしなかった色は、Reactのcolorプロパティで引き続き受け入れられることに注意してください。また、開発ツールがインポートされたCSSファイルの順序を保持するようにしてください。

前へ概要

次へダークモード

GitHubでこのページを編集してください。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

カラー

利用可能なアクセントカラー

アクセントスケールの構造

アクセントスケールのトークン

利用可能なグレーの色

グレースケールの構造

グレースケールのトークン

個別のカラートークン

フォーカススケールのトークン

サインアップ

サインアップ