color-schemeメタタグとCSSプロパティを生成

実際に対応している配色だけを宣言します

color-scheme宣言はページの対応状況を示すものであり、テーマを自動変換する機能ではありません。コントロール、背景、文字、境界線、画像、フォーカス状態のすべてが明るい表示で利用できる場合だけライトを選択します。同じ要素が暗い表示向けに設計されている場合はダークを選び、画面全体がどちらでも正しく動作する場合は両方を選択してください。最後の選択は、ライトを優先順の先頭に置いた<code>light dark</code>に変換されます。ブラウザーはこの情報を標準フォーム部品、スクロールバー、文書の背景などに利用できるため、正確さが重要です。実際より広い対応を宣言すると、部品の外観が合わなかったり、読みにくい一瞬の表示が生じたりします。無効な入力欄、自動入力、検証メッセージ、文字選択、コードブロック、ウィジェット、固定色のアイコンも確認してください。このツールは宣言を正しく整形しますが、その内容が正しいかどうかは設計とテストによって確かめる必要があります。

生成したHTMLとCSSを適切な場所に配置します

生成されたメタ要素は文書の<code>&lt;head&gt;</code>内に置き、可能であればブラウザーが主要な画面を描画する前に読み取れる位置へ配置します。返されるタグは完全な形なので、静的HTML、サーバー側で描画するレイアウト、サイトジェネレーターのhead設定へそのまま追加できます。CSS宣言は、意図する範囲を表すルールに置いてください。文書全体なら通常は<code>:root</code>を使い、独立したコンポーネントならそのルートに適用できます。セレクターを含まない宣言だけを返すため、通常のCSS、プリプロセッサー、CSSモジュール、スタイルオブジェクトで利用できます。HTMLとCSSは同じ正規化済みの値を使うので、メタデータとスタイルの不一致を防げます。早い段階の文書ヒントと明示的なカスケード値として両方を使うことも、構成に必要な一方だけを使うこともできます。導入後は、フレームワーク、head管理機能、圧縮処理、重複宣言によって値が変わっていないか、最終的なソースとCSSを確認してください。

対応宣言とテーマ選択を分けて考えます

2つの配色に対応することと、現在のテーマを選ぶことは関連していますが別の作業です。<code>light dark</code>は両方の表示に対応することを示すだけで、色の変数、切り替えボタン、保存される設定、メディアクエリーを作成しません。堅牢な実装では、背景、文字、境界線、アクセントに意味のある変数を定義し、製品の方針に従って切り替えます。OSの設定、アカウント設定、文書属性、またはそれらの組み合わせを利用できます。すべての視覚状態が完成してから宣言を生成してください。ライトとダークのシステム設定、キーボード操作、拡大表示、高コントラスト、強制色モードでテストします。画像、iframe、外部フォーム、構文強調、標準ダイアログも確認が必要です。自動化では、生成文字列と一緒に選択した入力を保存すると意図を追跡できます。対応テーマを減らす場合は、一方だけを手作業で直さず、新しい選択から両方を再生成してください。単一の情報源により、テンプレート、パッケージ、配備先のずれを防止できます。