주요 콘텐츠로 건너뛰기
DSH Themes

언어 전환

탐색 열기

당신의 팔레트를 라이브로

13 × 2

작업하고 싶은 팔레트를 만들어보세요

6개 테마에서 시작해 밝은 모드와 어두운 모드의 13개 색상을 편집하세요. 미리보기와 대비를 확인하고 CSS, JSON 또는 에이전트 프롬프트로 내보낼 수 있습니다.

나만의 색상 만들기

여기서는 색상을 미리 봅니다. DSH에 적용하려면 테마를 만들고 설치해야 합니다.

출발점을 선택하세요

기본 테마를 선택하고 미리보기 모드를 전환한 다음 편집할 색상 역할을 선택하세요.

검증된 테마

딥 오션그래파이트 릴레이종이 콘솔태양 흔적옥 회로높은 신호

미리보기 모드

밝게어둡게
첫 번째 컬러부터 완성된 팔레트까지

6

Token 호환 검증 Theme

21

디렉터리에 게시된 Theme

첫 번째 컬러부터 완성된 팔레트까지

  1. 01

    베이스 선택

    이미 모든 색상 역할을 포함하고 있는 호환 가능한 테마로 시작하세요.

  2. 02

    편집 및 미리보기

    밝은 색상과 어두운 색상을 조정하여 대화 미리보기에 적용되는 모습을 확인하세요.

  3. 03

    확인하고 내보내기

    텍스트 대비를 확인한 후 CSS 또는 JSON을 저장하거나 팔레트를 에이전트에 보내 테마를 생성하세요.

나만의 색상 만들기

색상 역할을 선택하고 밝은 모드나 어두운 모드의 색상을 바꾸면 미리보기에 바로 반영됩니다.

팔레트 미리보기

대화주요 텍스트보내기

시작할 곳을 선택하세요

독서 배경 편집강조 색상을 선택하세요상태 색상 조정

인터랙티브 13-토큰 맵

01020304050607080910111213

토큰 08 / 13

주요 텍스트

가장 읽기 쉬워야 하는 제목, 레이블, 우선순위 높은 콘텐츠입니다.

--dsw-alias-label-primary

색상 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"
    }
  }
}