メインコンテンツへ移動
DSH Themes

言語を切り替える

ナビゲーションを開く

あなたのパレット、ライブ

13 × 2

作業に使用するパレットを作成します

6 個のテーマから選び、ライトとダークの 13 色を編集。プレビューとコントラストを確認し、CSS、JSON、エージェント用プロンプトを出力できます。

自分だけの配色を作る

ここでは配色をプレビューします。DSHへの適用にはテーマの作成とインストールが必要です。

出発点を選択してください

基本テーマを選択し、プレビュー モードを切り替えて、編集する色の役割を選択します。

検証済みテーマ

ディープオーシャングラファイトリレーペーパーコンソールソーラートレースジェイドサーキット高信号

プレビューモード

ライトダーク
最初の色から完成したパレットまで

6

Token 互換の検証済み Theme

21

ディレクトリで公開中の Theme

最初の色から完成したパレットまで

  1. 01

    ベースを選択してください

    すべての色の役割がすでに含まれている互換性のあるテーマから始めてください。

  2. 02

    編集とプレビュー

    明るい色と暗い色を調整し、会話のプレビューに適用されることを確認します。

  3. 03

    チェックしてエクスポート

    テキストのコントラストを確認し、CSS または JSON を保存するか、パレットをエージェントに送信してテーマを作成します。

自分だけの配色を作る

役割を選び、ライト・ダークの色を変えると、隣のプレビューに反映されます。

パレットをプレビューする

会話オーバーレイ面送信

どこから始めるかを選択してください

読書背景を編集するアクセントカラーをお選びくださいステータスカラーの調整

インタラクティブな 13 トークンマップ

01020304050607080910111213

トークン 04 / 13

オーバーレイ面

メニュー、ポップオーバー、ページ上に浮かぶ内容の面です。

--dsw-alias-bg-overlay

変更済み：0 色

配色をDSHで使う

Agentへの指示をコピーしてテーマを作成できます。CSSとJSONには両モードが含まれ、JSONは再読み込みして編集できます。

読み込んだ色で「ペーパーコンソール」の両モードを置き換えます。ベースのテーマは変わらず、ファイル内のテーマ名による切り替えは行いません。

JSON · 13 × 2
{
  "format": "dsh-token-lab",
  "version": 1,
  "baseTheme": "paper-console",
  "tokens": {
    "--dsw-alias-bg-base": {
      "light": "#F7F5ED",
      "dark": "#101813"
    },
    "--dsw-alias-bg-layer-1": {
      "light": "#FFFEFA",
      "dark": "#17221B"
    },
    "--dsw-alias-bg-layer-2": {
      "light": "#EFEBDD",
      "dark": "#1D2C22"
    },
    "--dsw-alias-bg-overlay": {
      "light": "#FFFDF6",
      "dark": "#223428"
    },
    "--dsw-alias-border-l1": {
      "light": "#DDD7C5",
      "dark": "#334A3B"
    },
    "--dsw-alias-border-l2": {
      "light": "#BFB7A0",
      "dark": "#4D6957"
    },
    "--dsw-alias-brand-primary": {
      "light": "#24704D",
      "dark": "#70D49F"
    },
    "--dsw-alias-label-primary": {
      "light": "#26372D",
      "dark": "#EAF4EC"
    },
    "--dsw-alias-label-secondary": {
      "light": "#5D6C63",
      "dark": "#B0C2B5"
    },
    "--dsw-alias-state-error-primary": {
      "light": "#B23D42",
      "dark": "#F27F82"
    },
    "--dsw-alias-state-success-primary": {
      "light": "#26704D",
      "dark": "#70D49F"
    },
    "--dsw-alias-state-warn-primary": {
      "light": "#926615",
      "dark": "#EBC36C"
    },
    "--dsw-specific-sidebar-fill": {
      "light": "#ECE8D9",
      "dark": "#121E17"
    }
  }
}