あなたのパレット、ライブ
13 × 2作業に使用するパレットを作成します
6 個のテーマから選び、ライトとダークの 13 色を編集。プレビューとコントラストを確認し、CSS、JSON、エージェント用プロンプトを出力できます。
自分だけの配色を作る
ここでは配色をプレビューします。DSHへの適用にはテーマの作成とインストールが必要です。
出発点を選択してください
基本テーマを選択し、プレビュー モードを切り替えて、編集する色の役割を選択します。
最初の色から完成したパレットまで
6
Token 互換の検証済み Theme
21
ディレクトリで公開中の Theme
最初の色から完成したパレットまで
- 01
ベースを選択してください
すべての色の役割がすでに含まれている互換性のあるテーマから始めてください。
- 02
編集とプレビュー
明るい色と暗い色を調整し、会話のプレビューに適用されることを確認します。
- 03
チェックしてエクスポート
テキストのコントラストを確認し、CSS または JSON を保存するか、パレットをエージェントに送信してテーマを作成します。
自分だけの配色を作る
役割を選び、ライト・ダークの色を変えると、隣のプレビューに反映されます。
パレットをプレビューする
会話控えめな境界送信
どこから始めるかを選択してください
インタラクティブな 13 トークンマップ
トークン 05 / 13
控えめな境界
近接する内容を整理する静かな区切り線とカード枠です。
--dsw-alias-border-l1変更済み：0 色
配色をDSHで使う
Agentへの指示をコピーしてテーマを作成できます。CSSとJSONには両モードが含まれ、JSONは再読み込みして編集できます。
読み込んだ色で「ソーラートレース」の両モードを置き換えます。ベースのテーマは変わらず、ファイル内のテーマ名による切り替えは行いません。
JSON · 13 × 2
{
"format": "dsh-token-lab",
"version": 1,
"baseTheme": "solar-trace",
"tokens": {
"--dsw-alias-bg-base": {
"light": "#FFF7F1",
"dark": "#1A100D"
},
"--dsw-alias-bg-layer-1": {
"light": "#FFFFFF",
"dark": "#241612"
},
"--dsw-alias-bg-layer-2": {
"light": "#FCE9DC",
"dark": "#312019"
},
"--dsw-alias-bg-overlay": {
"light": "#FFFCF9",
"dark": "#3A261E"
},
"--dsw-alias-border-l1": {
"light": "#E9D4C6",
"dark": "#53382C"
},
"--dsw-alias-border-l2": {
"light": "#CFAE99",
"dark": "#76513F"
},
"--dsw-alias-brand-primary": {
"light": "#C84F24",
"dark": "#FF956B"
},
"--dsw-alias-label-primary": {
"light": "#48291D",
"dark": "#FFF1E9"
},
"--dsw-alias-label-secondary": {
"light": "#765B4E",
"dark": "#CEB3A6"
},
"--dsw-alias-state-error-primary": {
"light": "#B72F3D",
"dark": "#FF7680"
},
"--dsw-alias-state-success-primary": {
"light": "#39734E",
"dark": "#72D19A"
},
"--dsw-alias-state-warn-primary": {
"light": "#9B5807",
"dark": "#FFC062"
},
"--dsw-specific-sidebar-fill": {
"light": "#F9E6D9",
"dark": "#1E120F"
}
}
}