Theme Studio 테마 스튜디오

시작할 테마를 선택하세요

기본 (Default)

미리보기 (Preview)

Light Mode

Hero Title

서브타이틀 텍스트가 여기에 표시됩니다.

일반 텍스트와 강조 텍스트 , 흐린 텍스트의 대비를 확인하세요.

라디오 A 라디오 B

표면(Surface) 영역입니다.

색상 컨트롤

Light 편집 중

텍스트

#111827

강조 텍스트

#7c3aed

흐린 텍스트

#6b7280

텍스트 선택 글자색

#0f172a

텍스트 선택 배경

#bfdbfe

배경

#ffffff

표면/카드

#f3f4f6

테두리

#e5e7eb

버튼

#3b82f6

버튼:hover

#2563eb

강조 버튼

#ef4444

강조 버튼:hover

#dc2626

비활성 버튼

#93c5fd

CSS 생성 결과

html[data-theme='light'] {
  --color-text-normal: #111827;
  --color-text-accent: #7c3aed;
  --color-text-dimmed: #6b7280;
  --color-text-selected: #0f172a;
  --color-text-selected-bg: #bfdbfe;
  --color-bg: #ffffff;
  --color-bg-surface: #f3f4f6;
  --color-border: #e5e7eb;
  --color-btn-primary: #3b82f6;
  --color-btn-primary-hover: #2563eb;
  --color-btn-emphasis: #ef4444;
  --color-btn-emphasis-hover: #dc2626;
  --color-btn-disabled: #93c5fd;
}

html[data-theme='dark'] {
  --color-text-normal: #f9fafb;
  --color-text-accent: #c4b5fd;
  --color-text-dimmed: #9ca3af;
  --color-text-selected: #f8fafc;
  --color-text-selected-bg: #1d4ed8;
  --color-bg: #111827;
  --color-bg-surface: #1f2937;
  --color-border: #374151;
  --color-btn-primary: #60a5fa;
  --color-btn-primary-hover: #3b82f6;
  --color-btn-emphasis: #f97316;
  --color-btn-emphasis-hover: #ea580c;
  --color-btn-disabled: #1e3a8a;
}