Color mode

Search notes

Filter with tag:, lang:, or path:.

表示層(Presentation Layer)

表示層はテーマの責務で、色、フォント、余白、レイアウト、記事のスタイルを指します。コンテンツの意味、ルート、マニフェスト、プラグインの動作、クライアントスクリプトは含みません。

テーマができること

  • トークンを上書きまたは追加する
  • スタイルシートの規則を定義する
  • テーマ固有のデータ属性を宣言する
  • カラーモード、タイポグラフィ、レイアウトのプリセットを提供する
  • userCss で上書きする(カスケードで最後に読み込まれます)

テーマとカラーモードの相互作用

テーマは data-theme 属性とセマンティックトークンを通じてカラーモードと相互作用します。colorMode が "system" のときは data-theme 属性が省略され、@media (prefers-color-scheme: dark) クエリでOSの設定を検出します。テーマは個々のコンポーネントに色をハードコードせず、各カラーモードで適切に解決されるセマンティックトークン(例:--rb-color-ink)を使ってください。

テーマができないこと

コンポーネントの置き換え、JSXの注入、ルートの追加、プラグインの追加・削除、クライアントスクリプトの実行、DOMの変換、アイランドの登録、ファイルシステムへのアクセス、ContentManager へのアクセス。

関連用語

さらに詳しく

Local Graph

Nearby Notes

Open in Explorer →
表示層(Presentation Layer)テーマ(Theme)カラーモード(Color Mode)記事レイアウト(Article Layout)userCss(追加スタイルシート)
CurrentOutgoingBacklink