跳至主要內容
DSH Themes

切換語言

開啟導航

你的調色板，即時

13 × 2

建立您想要使用的調色板

從 6 款主題出發，編輯淺色與深色的 13 個顏色角色。即時預覽、檢查對比度，再匯出 CSS、JSON 或 Agent 提示詞。

調出適合你的配色

這裡即時預覽你的配色；製作並安裝後，才會改變 DSH 中的主題。

選擇你的起點

選擇一個基本主題，切換預覽模式，然後選擇一個顏色角色進行編輯。

已驗證主題

深海石墨中繼紙面終端日光軌跡玉製電路高訊號

預覽模式

淺色深色
從第一種顏色到成品調色盤

6

已驗證且相容 Token 的主題

21

目錄中已發佈的主題

從第一種顏色到成品調色盤

  1. 01

    選擇底座

    從已包含所有顏色角色的兼容主題開始。

  2. 02

    編輯與預覽

    調整淺色和深色並查看它們應用於對話預覽。

  3. 03

    檢查並導出

    檢查文字對比度，然後儲存 CSS 或 JSON，或將調色板傳送給您的代理程式以建立主題。

調出適合你的配色

選擇色彩角色，修改淺色或深色值，立即查看介面變化。

預覽您的調色板

對話輕邊界傳送

選擇從哪裡開始

編輯閱讀背景選擇強調色調整狀態顏色

可互動的 13 項 Token 對映

01020304050607080910111213

Token 05 / 13

輕邊界

用於組織相鄰內容的低調分隔線與卡片輪廓。

--dsw-alias-border-l1

已修改 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"
    }
  }
}