UI 테마
English | Tiếng Việt
각 테마는 themes/ 폴더 안에 있는 디렉토리입니다. 테마는 색상 토큰, 공유 클래스, 강조 색상 세트 및 샘플 페이지를 포함합니다.
모든 테마는 동일한 토큰 이름을 사용합니다. 테마를 전환한다는 것은 HTML을 수정하는 것이 아니라 CSS 파일을 교체하는 것을 의미합니다.
폴더 및 파일 이름은 베트남어로 되어 있습니다(키트는 베트남에서 제작되었습니다). README에는 용어집이 포함되어 있습니다.
사용 시기
- 목업을 그리거나 새 페이지 또는 앱 화면을 만들 때.
- 사용자가 스크린샷, 제품명 또는 URL을 보내 해당 스타일을 원할 때. them-theme.md를 참조하세요.
- 사용자가 "테마 X 사용", "강조 색상을 Y로 변경", "다크 모드"라고 말할 때.
소유자의 스타일
목업을 그리거나 새 테마를 만들기 전에 phong-cach-owner.md를 읽으세요. 요약: 파란색 또는 보라색 강조 색상을 사용하는 가볍고 컴팩트한 SaaS 대시보드로, 숫자가 많습니다. 소스는 소유자가 참조용으로 저장한 앱 세트입니다.
테마
| 테마 | 모양 | 상태 |
|---|---|---|
| clickup-radar | ClickUp 스타일 사이드바, 시나리오 라이브러리 카드, 라이트 및 컴팩트, 보라색 강조 | 2026-11-03 승인 |
| saas-sang | 소유자 스타일: 라이트 SaaS, 큰 숫자, 파란색 강조, 주제별 샘플 페이지 1개 | 2026-11-04 승인 |
themes/_mau는 새 테마를 위한 빈 템플릿입니다. 이것으로 그리지 마세요.
어떤 프로젝트가 어떤 테마를 사용하는지
이 폴더에 du-an.md 파일이 있으면 읽으세요. 이것은 소유자의 개인 파일(gitignored)로, 프로젝트를 테마, 주제 및 강조 색상에 매핑하고 복사 규칙(UI 언어, 사용자 호칭 방법)을 저장합니다. 다시 묻지 않고 따르세요.
du-an.md가 없는 경우: 소유자가 프로젝트 테마를 결정하면 du-an.example.md를 du-an.md로 복사하고 내용을 채우세요. 소유자가 프로젝트 테마를 확정하면 즉시 du-an.md를 업데이트하세요.
주제 및 샘플 페이지 (saas-sang 테마)
새 페이지의 경우 가장 가까운 주제를 선택하고 해당 샘플 페이지를 복사한 다음 필요하지 않은 부분을 제거하세요.
| 주제 | 샘플 페이지 | 기본 강조 색상 | 용도 |
|---|---|---|---|
| 보고서, 분석 | themes/saas-sang/chu-de/bao-cao.html | 파란색 (xanh-duong) | 대시보드, KPI, 트래픽 및 제품 분석 |
| 작업 | themes/saas-sang/chu-de/cong-viec.html | 보라색 (tim) | 작업 보드, 티켓, 프로젝트 추적 |
| 영업 | themes/saas-sang/chu-de/ban-hang.html | 남색 (cham) | 쇼핑몰 관리, 주문, 결제, 재고 |
| 뉴스, 읽기 | themes/saas-sang/chu-de/tin-tuc.html | 파란색 (xanh-duong) | 뉴스레터, 블로그, 큐레이션 피드 |
| 랜딩 페이지 | themes/saas-sang/chu-de/landing.html | 남색 (cham) | 제품 및 마케팅 페이지 |
| 로그인, 회원가입 | themes/saas-sang/chu-de/dang-ky.html | 남색 (cham) | 모든 앱의 인증 화면 |
- 인덱스 페이지:
themes/saas-sang/vi-du.html. chu-de/chung.js는 샘플 페이지 전용입니다.?mode=와?accent=를 읽고,<i data-i>에서 아이콘을 그리고, 오른쪽 하단에 Giao diện (모양) 버튼(라이트/다크/시스템, 8가지 강조 색상, 언어,bang-chon.html링크)을 추가합니다. 선택 사항은localStoragesaas-sang-xem에 저장됩니다. 페이지를 실제 프로젝트에 복사할 때는chung.js를 제거하세요. SVG를 인라인으로 붙여넣거나 Lucide를 사용하고,tokens.css에서 프로젝트 자체 테마 전환을 구축하세요.- saas-sang에는 추가 토큰(
--chart --chart-2 --grid --acc2 --acc2-soft --deep* --scrim)이 있습니다. 테마 README를 참조하세요. - 새 클래스(KPI, 차트, 그룹화된 테이블, 대화상자, 뉴스, 랜딩, 로그인)는 themes/saas-sang/components.md에 있습니다.
언어
- UI 복사는 프로젝트의 언어를 따릅니다(
du-an.md에 설정됨). 설정이 없으면 사용자가 작성하는 언어를 사용하세요. - 샘플 페이지는 베트남어로 작성됩니다.
themes/i18n.js와 사전themes/i18n-en.js는 브라우저에서 이를 영어로 번역합니다. - 표시 언어:
?lang=en|vi가 우선하고, 그 다음localStorageui-lang, 그 다음 브라우저 언어(vi*는 베트남어, 나머지는 영어)입니다. - 전환: saas-sang 페이지의 Giao diện 패널에 있는 "Ngôn ngữ / Language" 행과
bang-chon.html상단 바의 VI | EN 버튼(?lang=을 미리보기에 전달)입니다. - 텍스트,
placeholder,title,aria-label및 페이지 제목을 번역하고, 나중에 추가된 콘텐츠를 감시합니다. - 샘플 페이지의 새 베트남어 텍스트 또는 변경된 텍스트: 정확한 문자열과 영어 번역을
themes/i18n-en.js에 추가한 다음?lang=en으로 페이지를 열고 베트남어가 남아 있지 않은지 확인하세요. - i18n은 데모 전용입니다. 실제 프로젝트는
i18n.js를 복사하지 않습니다. 자체 언어로 복사본을 작성하세요.
테마 선택
- 프로젝트가
du-an.md에 있는 경우: 해당 테마와 강조 색상을 사용하세요. 다시 묻지 마세요. - 사용자가 메시지에서 테마 또는 강조 색상을 지정한 경우: 그렇게 하세요.
- 둘 다 아닌 경우: 채팅에서 모든 옵션을 포함하여 사용자 언어로 짧은 질문 하나를 하세요. 예:
이 프로젝트에는 아직 테마가 없습니다. clickup-radar(라이트, 컴팩트, 보라색 강조), saas-sang(귀하의 스타일, 파란색 강조)를 사용하시겠습니까, 아니면 다른 스타일의 스크린샷을 보내시겠습니까? clickup-radar 강조 색상: 보라색, 파란색, 스카이, 청록, 녹색, 주황, 분홍, 차콜. saas-sang 강조 색상: 파란색, 보라색, 남색, 스카이, 청록, 녹색, 주황, 차콜.
- 사용자가 색상을 선택하고 조정하려는 경우: 팔레트 보드를 엽니다(아래 참조).
팔레트 보드
themes/bang-chon.html. 팔레트는 웹사이트의 모든 색상이며, 하나의 카드 색상이 아닙니다.
- 레이아웃: 왼쪽에 팔레트, 오른쪽에 축소된 웹사이트 미리보기. 주제 페이지가 있는 테마(saas-sang,
THEMES에trang및macDinh를 선언함)는 선택한 목적에 대한 페이지를 미리보기하고, 다른 테마는vi-du.html을 표시합니다. 상단 바에는 테마 선택기, 라이트/다크, VI | EN, 편집 재설정 및 팔레트 복사가 있습니다. - 목적별 제안: 상단에 두 줄의 버튼, "사이트의 용도는 무엇입니까?" (영업, 작업, 보고서, 랜딩 페이지, 뉴스) 및 "어떻게 보여야 합니까?" (미니멀, 프로페셔널, 따뜻함, 밝음, 대담함, 우아함). 이를 선택하면 가장 좋은 3개의 팔레트가 한 줄 설명과 함께 상단으로 이동합니다. 색상이 편집되지 않은 경우 첫 번째 팔레트가 적용됩니다. 버튼을 다시 클릭하면 선택이 취소됩니다. 제안은 페이지의 규칙 테이블
GOI_Y에서 제공됩니다(목적 일치 2점, 스타일 일치 1점). 페이지는 AI를 호출하지 않습니다. 목적 또는 스타일을 추가하려면MUC,KIEU및GOI_Y를 편집하세요. - 선택: 각 팔레트는 5가지 주요 색상과 16진수 코드를 표시합니다. 하나를 클릭하면 전체 웹사이트가 변경됩니다. 다른 팔레트를 선택하면 편집 내용이 취소됩니다.
- 현재 팔레트 편집: 스트립의 견본을 클릭하거나 "사이트의 모든 색상"을 열어 그룹(배경, 텍스트 및 테두리, 강조, 상태, 레이블)별로 색상 선택기 또는 16진수 코드로 편집합니다. 사이트가 즉시 업데이트됩니다. 각 견본은 대비 비율을 표시하며, 4.5 미만이면 빨간색으로 표시됩니다. 편집된 색상에는 "재설정" 버튼이 있습니다.
- 라이트 및 다크는 별도로 편집됩니다.
- 팔레트 복사: 라이트 및 다크 CSS와 Claude에 붙여넣을 문장을 제공합니다. 이를 수신하면 them-theme.md의 "팔레트 보드에서" 섹션을 따르세요.
PHOI 배열의 각 팔레트는 라이트 및 다크에 대해 4가지 기본 색상(페이지, 카드, 텍스트, 강조)만 저장합니다. 함수 tinh()는 다른 배경, 텍스트, 테두리 및 강조 음영을 파생합니다. 상태 및 레이블 색상은 테마에 그대로 유지됩니다.
새 테마는 이 페이지의 THEMES 배열에 추가되어야 합니다. 사용자 선택은 브라우저(키 phoi-mau)에 저장됩니다.
미리보기
themes 폴더를 정적 서버로 제공하세요:
python -m http.server 8766 -d themes
- 팔레트 보드:
http://localhost:8766/bang-chon.html - 하나의 테마:
http://localhost:8766/<theme>/vi-du.html?mode=dark&accent=cam - 주제 페이지:
http://localhost:8766/saas-sang/chu-de/<topic>.html?mode=dark&lang=en
라이브 데모: https://huydp93.github.io/ui-theme-skill/themes/bang-chon.html
공유 토큰 이름
새 테마는 이 모든 것을 라이트 및 다크로 정의해야 합니다. 전체 주석 목록은 themes/_mau/tokens.css에 있습니다.
| 그룹 | 토큰 |
|---|---|
| 배경, 텍스트 | --bg --side --surface --sunk --hover --line --line-strong --fg --fg2 --fg3 |
| 강조 | --acc --acc-hover --acc-fg --acc-soft --acc-line --ink --ink-fg |
| 상태 | --ok --bad --err-fg --err-bg --code-bg --code-fg |
| 그림자 | --shadow --shadow-pop |
| 유형 레이블 | --k-tip --k-tool --k-trend --k-opp --k-news --k-fg |
| 상태 알약 | --s-new --s-watch --s-sent --s-seen 및 각각의 -bg 버전 |
| 둥글기 | --r-card --r-btn --r-btn-sm --r-badge --r-pill |
| 높이 | --h-btn --h-btn-sm --h-field |
| 레이아웃 | --w-side --h-top --w-page |
| 글꼴 | --font-sans --font-mono --icon-stroke |
공유 클래스(.card, .btn, .nav...)는 각 테마의 components.md에 있습니다.
테마 적용
항상 다음 순서로 로드하세요: 글꼴 → tokens.css → components.css → mau-nhan.css.
글꼴 링크는 각 테마의 tokens.css 상단에 있습니다.
a) Canvas .dc.html
tokens.css,components.css및mau-nhan.css를<helmet><style>에 붙여넣습니다. 캔버스는 외부 파일을 로드할 수 없습니다.- Google Fonts
<link>를<helmet>에 추가합니다. - 보드를
<div class="t {{mode}}" data-accent="{{accent}}">로 감쌉니다.DCLogic의darkprop은mode를dark또는 빈 문자열로 설정합니다.data-accent를 생략하면 기본 강조 색상을 사용합니다. .t클래스는 내부의 라이트 색상을 재설정하므로 캔버스 자체가 다크인 경우에도 보드는 해당 prop을 따릅니다.
b) 일반 HTML 또는 Artifact
- CSS를
<style>태그에 복사(Artifact는 CSS를 페이지 내에 유지해야 함)하거나 페이지가 테마 폴더 옆에 있는 경우<link>를 사용합니다. :root를 사용하세요..t래퍼가 필요하지 않습니다.data-theme="light|dark"및data-accent="..."를<html>에 넣으세요.data-theme이 없으면 시스템을 따릅니다.- 레이아웃: 테마의
vi-du.html(또는 saas-sang 주제 페이지)에서 시작하여 필요하지 않은 부분을 제거하세요.
c) React + Tailwind
tokens.css,components.css,mau-nhan.css를 프로젝트에 복사하고 루트 CSS 파일에서 한 번 가져옵니다.- Tailwind 색상을 토큰에 매핑합니다. 16진수 코드를 복사하지 마세요:
- Tailwind v4, 루트 CSS에서:
@theme inline { --color-bg: var(--bg); --color-surface: var(--surface); --color-line: var(--line); --color-fg: var(--fg); --color-fg2: var(--fg2); --color-fg3: var(--fg3); --color-acc: var(--acc); --color-acc-soft: var(--acc-soft); --radius-card: var(--r-card); --font-sans: var(--font-sans); --font-mono: var(--font-mono); } - Tailwind v3,
tailwind.config에서:theme: { extend: { colors: { bg: 'var(--bg)', surface: 'var(--surface)', line: 'var(--line)', fg: 'var(--fg)', fg2: 'var(--fg2)', fg3: 'var(--fg3)', acc: 'var(--acc)', 'acc-soft': 'var(--acc-soft)' }, borderRadius: { card: 'var(--r-card)' }, fontFamily: { sans: 'var(--font-sans)', mono: 'var(--font-mono)' } } }
- Tailwind v4, 루트 CSS에서:
- 공유 클래스를
@layer components에 넣어 Tailwind 클래스가 여전히 이를 재정의할 수 있도록 합니다. - 라이트/다크 또는 강조 색상 전환은
document.documentElement에서data-theme및data-accent를 설정하기만 하면 됩니다.
규칙
- 아이콘은 획 SVG이며,
stroke-width는--icon-stroke에서 가져옵니다. 아이콘으로 이모지를 사용하지 마세요. - 숫자, 시간 및 코드는
.mono를 사용합니다. - 페이지에 16진수 코드를 사용하지 마세요. 새 색상이 필요한가요? 테마에 토큰을 추가하세요.
- 빨간색은 오류(
--bad)에만 사용합니다. 빨간색을 강조 색상으로 만들지 마세요. - 라이트 강조 색상은 흰색 버튼 텍스트가 대비 4.5에 도달할 수 있을 만큼 충분히 어두워야 합니다.
- 목업 데이터는 샘플 데이터입니다. 실제 데이터를 사용하거나
.env또는 데이터베이스에서 읽지 마세요. du-an.md의 복사 규칙(언어, 사용자 호칭 방법)을 따르세요.- 사용자에게 보여주기 전에 라이트와 다크를 모두 확인하세요.
테마 추가
them-theme.md를 참조하세요.