カラーシステム

各PrimeReactテーマは、独自のカラーパレットをエクスポートします。

概要#

色はCSS変数としてエクスポートされ、var(--text-color)などの標準的なvar構文で使用されます。以下は、テーマで使用される一般的な変数のリストです。

変数説明
--text-colorフォントテキストの色。
--text-color-secondary二次レベルの、落ち着いたフォントテキストの色。
--primary-colorテーマのプライマリカラー。
--primary-color-text背景がプライマリカラーの場合のテキストの色。
--font-familyテーマのフォントファミリー。
--inline-spacing隣接するアイテム間の間隔。
--border-radius要素の共通のボーダー半径。
--focus-ringフォーカスされた要素のボックスシャドウ。
--mask-bgオーバーレイマスクの背景。
--highlight-bg強調表示された要素の背景。
--highlight-text-color強調表示された要素のテキストの色。
強調表示されたアイテム
プライマリカラー

<div style={{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>
    Highlighted Item
</div>
<div style={{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>
    Primary Color
</div>
         

サーフェス#

サーフェスパレットは、ヘッダー、コンテンツ、フッター、オーバーレイ、仕切りなどのレイヤーを設計する際に使用されます。サーフェスパレットは0〜900の間で変化し、名前付きサーフェスも利用可能です。

--surface-0
--surface-50
--surface-100
--surface-200
--surface-300
--surface-400
--surface-500
--surface-600
--surface-700
--surface-800
--surface-900
変数説明
--surface-groundベースとなる背景色。
--surface-section背景サーフェスのセクションの背景色。
--surface-cardカードとして使用されるサーフェスの色。
--surface-overlayオーバーレイサーフェスの色。
--surface-border仕切りの色。
--surface-hoverホバー状態の要素の色。

パレット#

カラーパレットは13のメインカラーで構成されており、各色は50から900までの色合い/陰影を提供します。

primary-50
primary-100
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
primary-900
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
cyan-50
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
pink-50
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
indigo-50
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
bluegray-50
bluegray-100
bluegray-200
bluegray-300
bluegray-400
bluegray-500
bluegray-600
bluegray-700
bluegray-800
bluegray-900
purple-50
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
        PrimeReact 10.8.3 by PrimeTek