テーマ

@theme はユーティリティ定義用のトークンを登録します。修飾子は、配信するトークン宣言と、生成値に var() を使うか宣言値を代入するかを独立して制御します。プロジェクトの設定はテーマトークン、スコープ、継承、解決は変数とモードを参照してください。

@theme

ユーティリティトークンはカスタムプロパティで宣言します。テーマブロックは最上位に置き、カスタムプロパティのトークン宣言だけを受け付けます。キーフレームはブロックの外のネイティブ CSS で宣言してください。

@theme {  --color-brand: #4f46e5;  --spacing-card: 1.5rem;}

未知または重複した修飾子はエラーです。static と inline の順序は問いません。

トークンは @layer theme 内の :root, :host に出力します。コンパイラーは宣言順と重複値を保持します。使用するトークンは推移的な変数依存を保持します。セレクターと条件規則はブロック外のネイティブ CSS に置きます。

ユーティリティパターン用の名前付きトークンを登録するのは @theme だけです。:root { --app-brand: red; } のようなネイティブ宣言は通常の CSS のままです。(color:var(--app-brand)) で直接使うか、inline テーマトークンで橋渡しします。

各ケースで brand と spare を宣言し、bg-brand だけを使います。inline のみなら両トークンとも宣言が不要です。static を加えると両方を保持し、代入済みのクラス値は変えません。

テキストによる説明

1. 全ケースで --color-brand: #4f46e5 と --color-spare: #0d9488 を宣言します。参照元は bg-brand だけで、ネイティブのトークン参照はありません。
2. 通常の @theme は使用する brand トークンと background-color: var(--color-brand) を出力し、未使用の spare トークンは省きます。
3. @theme inline は生成宣言に #4f46e5 を代入します。ユーティリティはどちらのトークンも読まなくなるため、この場合は両トークンの宣言を出力しません。
4. @theme static は両トークンを保持します。@theme static inline も両方を保持しますが、生成する background-color は #4f46e5 のままです。保持と代入は独立しています。

@theme inline

inline はトークンの宣言値を Master が生成する宣言に代入します。

@theme inline {  --color-brand: var(--app-brand);}:root {  --app-brand: #4f46e5;}[data-theme="ocean"] {  --app-brand: #0369a1;}

bg-brand は background-color:var(--app-brand) を出力し、クラスを使う要素上でネイティブ変数を解決します。直接宣言クラス、ユーティリティクラス、ネイティブ @apply の展開にも同じ代入を適用します。手書きのネイティブ宣言は元の var() 参照を保持します。

代入は 1 回だけです。置換値内の変数、関数、代替値はネイティブ CSS の意味を保ちます。依存関係は結果の宣言から収集するため、inline ユーティリティを使うだけでは置き換えたトークンの出力を強制しません。トークンへの直接のネイティブ参照では、その宣言を保持できます。

テーマ定義が重複すると、重要度、次にソース順で inline 値とモードを選びます。カスタムプロパティの !important は生成ユーティリティを重要にしません。通常の別名は宣言したスコープで解決するため、使用箇所で別の変数を読む橋渡しには inline を使います。

@theme static

クラスやネイティブ参照がなくてもトークンを出力するには static を使います。

@theme static {  --color-integration: #4f46e5;}@theme static inline {  --color-brand: var(--app-brand);}

static はトークンの配信、inline は生成値を制御し、どちらの順でも組み合わせられます。static 宣言が 1 つでもあるトークンは、定義を除くまで依存先とともに保持します。参照先のスタイルシートは、トークンが static というだけで出力の起点にはなりません。

ネイティブのテーマ上書き

既定値を @theme に登録し、ネイティブのセレクターやクエリで変数を上書きします。

@theme {  --color-panel: white;}[data-theme="ocean"] {  --color-panel: #082f49;}@media (prefers-color-scheme: dark) {  :root {    --color-panel: #111827;  }}

ネイティブの上書きは元のスコープ、レイヤー、スタイルシート配信を保ちます。同じ要素では、レイヤー外の通常の上書きが theme レイヤーの通常宣言より優先します。defaults など後のレイヤーでも上書きを優先しつつ、components と utilities のレイヤーに優先させられます。必要な場所にネイティブスタイルシートをインポートしてください。@reference は定義だけを供給し、規則は配信しません。

プリセットは適応型の色と影にネイティブの light-dark() を使い、両変数の分岐を依存先として保持します。ネイティブのベース CSS はルートに color-scheme: light dark を設定し、要素とシャドウホストに明暗の data-theme セレクターを用意します。色を参照してください。

@theme { --color-brand: #4f46e5; }  .dark { --color-brand: #111827; } .card { color: var(--color-brand); }

.dark {  --color-brand: #111827;}.card {  color: var(--color-brand);}@layer theme {  :root,  :host {    --color-brand: #4f46e5  }}