あなたのパレット、ライブ
13 × 2作業に使用するパレットを作成します
6 個のテーマから選び、ライトとダークの 13 色を編集。プレビューとコントラストを確認し、CSS、JSON、エージェント用プロンプトを出力できます。
自分だけの配色を作る
ここでは配色をプレビューします。DSHへの適用にはテーマの作成とインストールが必要です。
出発点を選択してください
基本テーマを選択し、プレビュー モードを切り替えて、編集する色の役割を選択します。
最初の色から完成したパレットまで
6
Token 互換の検証済み Theme
21
ディレクトリで公開中の Theme
最初の色から完成したパレットまで
- 01
ベースを選択してください
すべての色の役割がすでに含まれている互換性のあるテーマから始めてください。
- 02
編集とプレビュー
明るい色と暗い色を調整し、会話のプレビューに適用されることを確認します。
- 03
チェックしてエクスポート
テキストのコントラストを確認し、CSS または JSON を保存するか、パレットをエージェントに送信してテーマを作成します。
自分だけの配色を作る
役割を選び、ライト・ダークの色を変えると、隣のプレビューに反映されます。
パレットをプレビューする
会話補助テキスト送信
どこから始めるかを選択してください
インタラクティブな 13 トークンマップ
トークン 09 / 13
補助テキスト
補足説明、メタデータ、優先度の低い画面ラベルです。
--dsw-alias-label-secondary変更済み：0 色
配色をDSHで使う
Agentへの指示をコピーしてテーマを作成できます。CSSとJSONには両モードが含まれ、JSONは再読み込みして編集できます。
読み込んだ色で「ディープオーシャン」の両モードを置き換えます。ベースのテーマは変わらず、ファイル内のテーマ名による切り替えは行いません。
JSON · 13 × 2
{
"format": "dsh-token-lab",
"version": 1,
"baseTheme": "deep-ocean",
"tokens": {
"--dsw-alias-bg-base": {
"light": "#F4F8FD",
"dark": "#07121F"
},
"--dsw-alias-bg-layer-1": {
"light": "#FFFFFF",
"dark": "#0C1B2B"
},
"--dsw-alias-bg-layer-2": {
"light": "#E9F2FC",
"dark": "#11263C"
},
"--dsw-alias-bg-overlay": {
"light": "#FFFFFF",
"dark": "#142B43"
},
"--dsw-alias-border-l1": {
"light": "#D6E3F1",
"dark": "#24415E"
},
"--dsw-alias-border-l2": {
"light": "#B7CCE2",
"dark": "#37617E"
},
"--dsw-alias-brand-primary": {
"light": "#1769E0",
"dark": "#62A8FF"
},
"--dsw-alias-label-primary": {
"light": "#132D46",
"dark": "#EFF6FF"
},
"--dsw-alias-label-secondary": {
"light": "#526C81",
"dark": "#A9BDD0"
},
"--dsw-alias-state-error-primary": {
"light": "#B93445",
"dark": "#FF7A86"
},
"--dsw-alias-state-success-primary": {
"light": "#167656",
"dark": "#55D6A6"
},
"--dsw-alias-state-warn-primary": {
"light": "#9B5E07",
"dark": "#FFC666"
},
"--dsw-specific-sidebar-fill": {
"light": "#E6F0FB",
"dark": "#091827"
}
}
}