ベースのテーマから自分の配色へ
- 01
ベースのテーマを選ぶ
完全な色データを持つ対応テーマを選びます。ページには、対応テーマ数と公開済みテーマの総数が別々に表示されます。
- 02
色の役割を選んで編集する
背景、文字、アクセント、状態表示の色を選び、16進数の値を変更します。ライトモードとダークモードを別々に調整し、横の会話プレビューで文字、コード、操作部品を確認します。
- 03
比較して確認する
元のテーマと比較し、文字と各プレビュー背景の組み合わせで最も低いコントラスト比を確認します。通常の文字には少なくとも 4.5:1 が必要です。編集後は、実際の画面でフォーカスとキーボード操作も確認してください。
- 04
出力してテーマを作成する
両モードを含む CSS または JSON をダウンロードします。出力した JSON は再読み込みできます。Agent 向けのプロンプトをコピーして、この配色を使った独立したテーマの作成、インストール、実機確認を依頼できます。
例: 落ち着いて読書ができるワークスペース
好きなテーマを選び、読書用の背景を少し暖かみのある色にして、補助的な文字が読みやすいか確認します。主要なボタンや選択状態を識別しやすいアクセント色を選びましょう。ダークモードは個別に調整してください。ライトモードの色をそのまま反転すると、警告やコードが読みにくくなることがあります。
出力した Token Lab JSON から独立した DSH テーマを作成してください。対象は 0.1.3-alpha.1、ソースコミットは d347e703908d0406b7a7ef80e3a0e594d86b2215 です。ライト・ダーク両モードの13個のセマンティックトークンをすべて保持してください。文字のコントラストを確認してビルドし、実際の Harness でサイドバー、メッセージ、コード、メニュー、入力欄をテストしてください。インストール、再起動、切り替え、復元の手順を提示してください。実際にテストする前に、検証済みと記載しないでください。続きます
よくある質問
変更を行う前に
フォーマット、互換性、証拠、ロールバックに関する回答
このガイドでは何を確認しますか？
このガイドの対象：ライト・ダーク両モードの編集、文字のコントラスト確認、CSS、JSON、Agent 向けプロンプトの出力
最初に何をすべきですか？
配色を一から考える必要はありません。Token Lab では既存のテーマの色を一つずつ調整し、会話プレビューでその変化をすぐに確認できます。
最も重要な境界は何ですか？
Token Lab が編集するのは配色の下書きです。インストール済みのテーマはすぐには変わりません。新しい配色を 0.1.3-alpha.1 用にビルドし、実際のサイドバー、メッセージ、コード、メニュー、入力欄、テーマの切り替えと復元を確認する必要があります。下書きは現在のブラウザタブに一時保存されるため、残しておきたい場合は JSON を出力してください。
CSS を書き出すとテーマがインストールされますか？
いいえ。CSS と JSON は配色ファイルです。Agent 向けの指示を使って別のパッケージを作成し、インストールして実際の画面への反映を確認してください。
コントラストの確認に合格したら公開できますか？
コントラストは配色の一部の確認です。実際の画面、キーボードフォーカス、異なる画面サイズ、実行時の動作も確認する必要があります。
学習を続ける
検証済みの証拠から続ける
公開済みのアーティファクトを比較するか、インストール手順に戻ります。