あなたのパレット、ライブ
13 × 2作業に使用するパレットを作成します
6 個のテーマから選び、ライトとダークの 13 色を編集。プレビューとコントラストを確認し、CSS、JSON、エージェント用プロンプトを出力できます。
自分だけの配色を作る
ここでは配色をプレビューします。DSHへの適用にはテーマの作成とインストールが必要です。
出発点を選択してください
基本テーマを選択し、プレビュー モードを切り替えて、編集する色の役割を選択します。
最初の色から完成したパレットまで
6
Token 互換の検証済み Theme
21
ディレクトリで公開中の Theme
最初の色から完成したパレットまで
- 01
ベースを選択してください
すべての色の役割がすでに含まれている互換性のあるテーマから始めてください。
- 02
編集とプレビュー
明るい色と暗い色を調整し、会話のプレビューに適用されることを確認します。
- 03
チェックしてエクスポート
テキストのコントラストを確認し、CSS または JSON を保存するか、パレットをエージェントに送信してテーマを作成します。
自分だけの配色を作る
役割を選び、ライト・ダークの色を変えると、隣のプレビューに反映されます。
パレットをプレビューする
会話主要テキスト送信
どこから始めるかを選択してください
インタラクティブな 13 トークンマップ
トークン 08 / 13
主要テキスト
最も読みやすくする見出し、ラベル、優先度の高い内容です。
--dsw-alias-label-primary変更済み：0 色
配色をDSHで使う
Agentへの指示をコピーしてテーマを作成できます。CSSとJSONには両モードが含まれ、JSONは再読み込みして編集できます。
読み込んだ色で「高信号」の両モードを置き換えます。ベースのテーマは変わらず、ファイル内のテーマ名による切り替えは行いません。
JSON · 13 × 2
{
"format": "dsh-token-lab",
"version": 1,
"baseTheme": "high-signal",
"tokens": {
"--dsw-alias-bg-base": {
"light": "#FFFFFF",
"dark": "#000000"
},
"--dsw-alias-bg-layer-1": {
"light": "#FFFFFF",
"dark": "#080808"
},
"--dsw-alias-bg-layer-2": {
"light": "#F1F1F1",
"dark": "#141414"
},
"--dsw-alias-bg-overlay": {
"light": "#FFFFFF",
"dark": "#1C1C1C"
},
"--dsw-alias-border-l1": {
"light": "#222222",
"dark": "#DDDDDD"
},
"--dsw-alias-border-l2": {
"light": "#000000",
"dark": "#FFFFFF"
},
"--dsw-alias-brand-primary": {
"light": "#0037FF",
"dark": "#FFE600"
},
"--dsw-alias-label-primary": {
"light": "#000000",
"dark": "#FFFFFF"
},
"--dsw-alias-label-secondary": {
"light": "#333333",
"dark": "#D6D6D6"
},
"--dsw-alias-state-error-primary": {
"light": "#B00020",
"dark": "#FF5570"
},
"--dsw-alias-state-success-primary": {
"light": "#006B35",
"dark": "#55FF88"
},
"--dsw-alias-state-warn-primary": {
"light": "#765500",
"dark": "#FFE600"
},
"--dsw-specific-sidebar-fill": {
"light": "#F1F1F1",
"dark": "#000000"
}
}
}