shadcn 테마 생성기.
브랜드 색상, 모서리 반경, 폰트를 고르면 라이트·다크 shadcn/ui 테마 전체가 나오고, 실제 shadcn 컴포넌트로 프리뷰할 수 있습니다. globals.css, DESIGN.md, shadcn 레지스트리 파일로 내보내세요. 브라우저에서 실행되므로 고른 내용은 업로드되지 않습니다.
프로젝트 만들기클릭 한 번으로 새 프로젝트를 배포하세요.
총 매출$45,231.89지난달 대비 +20.1%
이메일 알림매주 활동 요약을 받아 보세요.
신규보조아웃라인
/* 내 테마 — https://codexdesign.io/tools/shadcn-theme-generator */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=JetBrains+Mono:wght@400&display=swap");
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.5rem;
--font-sans: "Manrope", system-ui, sans-serif;
--font-heading: "Manrope", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--background: oklch(0.99 0.005 258.324);
--foreground: oklch(0.149 0.009 263.967);
--card: oklch(1 0 0);
--card-foreground: oklch(0.149 0.009 263.967);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.149 0.009 263.967);
--primary: oklch(0.573 0.199 261.837);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.966 0.009 258.336);
--secondary-foreground: oklch(0.209 0.01 268.187);
--muted: oklch(0.966 0.009 258.336);
--muted-foreground: oklch(0.54 0.021 261.3);
--accent: oklch(0.95 0.024 262.095);
--accent-foreground: oklch(0.209 0.01 268.187);
--destructive: oklch(0.578 0.236 27.389);
--border: oklch(0.921 0.008 260.732);
--input: oklch(0.921 0.008 260.732);
--ring: oklch(0.573 0.199 261.837);
--chart-1: oklch(0.573 0.199 261.837);
--chart-2: oklch(0.65 0.159 321.917);
--chart-3: oklch(0.65 0.161 51.607);
--chart-4: oklch(0.65 0.144 112.121);
--chart-5: oklch(0.651 0.111 201.755);
--sidebar: oklch(1 0 0);
--sidebar-foreground: oklch(0.149 0.009 263.967);
--sidebar-primary: oklch(0.573 0.199 261.837);
--sidebar-primary-foreground: oklch(0 0 0);
--sidebar-accent: oklch(0.95 0.024 262.095);
--sidebar-accent-foreground: oklch(0.209 0.01 268.187);
--sidebar-border: oklch(0.921 0.008 260.732);
--sidebar-ring: oklch(0.573 0.199 261.837);
}
.dark {
--background: oklch(0.144 0.009 262.987);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0.01 268.174);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0.01 268.174);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.72 0.145 261.777);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.271 0.009 255.578);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.271 0.009 255.578);
--muted-foreground: oklch(0.71 0.019 261.324);
--accent: oklch(0.301 0.049 261.495);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.188 22.146);
--border: oklch(0.301 0.008 264.452);
--input: oklch(0.34 0.007 264.469);
--ring: oklch(0.72 0.145 261.777);
--chart-1: oklch(0.7 0.157 261.589);
--chart-2: oklch(0.721 0.16 321.596);
--chart-3: oklch(0.72 0.16 51.708);
--chart-4: oklch(0.719 0.159 111.848);
--chart-5: oklch(0.721 0.123 201.605);
--sidebar: oklch(0.205 0.01 268.174);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.72 0.145 261.777);
--sidebar-primary-foreground: oklch(0 0 0);
--sidebar-accent: oklch(0.301 0.049 261.495);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.301 0.008 264.452);
--sidebar-ring: oklch(0.72 0.145 261.777);
}
@theme inline {
--font-sans: var(--font-sans);
--font-heading: var(--font-heading);
--font-mono: var(--font-mono);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground font-sans;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
}
}
브라우저 안에서 실행됩니다. 여기에 넣은 파일은 업로드되거나 저장되지 않습니다.
shadcn 테마 만드는 방법
- 브랜드 색상을 고르세요. 색상 견본으로 고르거나 HEX, rgb(), hsl(), oklch()로 입력합니다. 이 색상이
primary와 포커스 링이 되며, 처음에는#2F6FEB입니다. - 모서리 반경을 고르세요. 0, 0.25, 0.5, 0.75, 1 중에서 고릅니다. 단위는 rem이므로 0.5는 8px입니다. 처음에는 0.5입니다.
- 폰트를 고르세요. Inter, Geist, DM Sans, Manrope, Plus Jakarta Sans, IBM Plex Sans, Space Grotesk, Source Serif 4, Fraunces의 아홉 가지 중에서 고릅니다. 제목과 본문에 쓰이며, 처음에는 Manrope입니다.
- 프리뷰 위에서 라이트와 다크를 전환하세요. 프리뷰는 shadcn 컴포넌트로 만든 샘플 대시보드입니다. 프로젝트 만들기 폼, 다섯 가지 차트 색상의 막대가 있는 매출 카드, 스위치, 배지, 삭제 버튼이 들어 있습니다.
- 테마를 내보내세요. 프리뷰 아래의 탭 세 개에서 globals.css, DESIGN.md, shadcn 레지스트리 JSON 중 고릅니다. 모두 복사와 다운로드가 가능합니다.
- 비슷한 시스템을 확인하세요. 내보내기 아래에, Codex Design 라이브러리의 디자인 시스템 중 대표 색상이 내 색상과 가장 가까운 세 가지가 나타납니다.
테마에 들어 있는 것
- shadcn 테마의 색상 변수 23개 전체가 라이트와 다크 각각 oklch() 값으로 들어 있습니다. background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, chart-1부터 chart-5까지, 그리고 card, popover, primary, secondary, muted, accent 각각의 foreground입니다. globals.css에는 여기서 파생한 사이드바 변수 8개가 더해집니다.
- 모서리 반경.
--radius는 고른 값을 따르고, 작은 크기, 중간 크기, 큰 크기, 아주 큰 크기의 모서리는 이 값으로 계산됩니다. - 폰트. 고른 폰트가 제목과 본문 폰트가 되고, 코드에는 JetBrains Mono가 쓰이며, 파일은 이 폰트들을 모두 Google Fonts에서 가져옵니다.
세 가지 내보내기 형식
- globals.css는 shadcn/ui를 쓰는 Tailwind v4 프로젝트용 스타일시트입니다. 폰트 import, 라이트 색상·모서리 반경·폰트가 들어 있는
:root블록, 다크 색상이 들어 있는.dark블록, 그리고 변수를 Tailwind의 색상 클래스에 연결하는@theme inline블록이 들어 있습니다. - DESIGN.md는 Codex와 다른 에이전트를 위한 파일입니다. 라이트 테마의 색상(secondary와 tertiary는 두 번째와 세 번째 차트 색상), 고른 폰트의 타입 스케일, 모서리 반경, 4px 기준의 간격, 기본 버튼, 그리고 형식의 섹션 제목 아래에 짧은 메모가 들어 있습니다. 메모는 일반적인 내용이므로 나만의 규칙을 덧붙이세요.
- shadcn 레지스트리 JSON은
registry:theme유형의 shadcn 레지스트리 항목으로 된 테마로, 이름은my-theme이고 폰트, 모서리 반경, 라이트·다크 색상이 들어 있습니다. shadcn 레지스트리에 테마를 올리기 위한 형식으로, 디자인 시스템 라이브러리가 테마를 설치하게 하는 것과 같은 방식으로npx shadcn add와 URL로 추가할 수 있습니다.
Codex와 함께 쓰기
- 테마를 프로젝트에 추가하세요.
globals.css의 색상, 모서리 반경, 폰트 변수를 내보낸 것으로 바꿉니다.:root와.dark모두입니다. - DESIGN.md를 저장하세요. 프로젝트 루트에 두고, DESIGN.md 가이드에서 설명하듯 AGENTS.md에서 가리키게 합니다.
- Codex가 자기만의 색상 대신 토큰을 쓰도록 요청하세요:
shadcn 테마 적용
[내보낸 globals.css]의 테마를 이 shadcn/ui 프로젝트에 적용해 줘. 우리 globals.css의 색상, --radius, 폰트 변수를 :root와 .dark 모두 테마에 있는 것으로 바꾸고, 파일의 나머지는 그대로 둬. 그다음 [대시보드 페이지]를 shadcn 컴포넌트와 bg-primary, text-muted-foreground 같은 테마 토큰만 사용해서 다시 스타일링해 줘. 색상을 직접 하드코딩하지 말고, 아직 하드코딩된 컴포넌트가 있으면 알려 줘.
자주 묻는 질문
무료인가요?
네. 무료이고, 회원가입이 필요 없으며, 만들 수 있는 테마 수에도 제한이 없습니다.
고른 색상이 업로드되나요?
아니요. 테마는 브라우저에서 만들어지며 고른 색상과 설정은 전송되거나 저장되지 않습니다. 프리뷰는 고른 폰트를 Google Fonts에서 불러오는데, 이 요청에는 폰트 이름만 담기고 색상은 담기지 않습니다. 사이트는 도구가 사용되었다는 사실만 집계합니다.
색상 하나로 어떻게 테마 전체를 만드나요?
OKLCH로 계산합니다. 고른 색상이 primary와 포커스 링이 됩니다. 배경, 테두리, 회색은 고정된 명도 값을 쓰고 내 색상의 색조가 살짝 섞입니다. primary 위의 텍스트는 흰색과 검은색 중 명도 대비가 더 높은 쪽이므로 항상 4.5:1 이상이 됩니다. 차트 색상 다섯 가지는 내 색상에서 시작해 색상환을 따라 한 칸씩 이동하며 정해지고, destructive는 shadcn 기본 빨간색입니다. 다크 모드에서는 어두운 브랜드 색상을 명도 0.72 이상으로 끌어올려 눈에 잘 띄게 합니다. 규칙이 고정되어 있어 같은 색상에서는 항상 같은 테마가 나오므로, 다듬어 갈 출발점으로 쓰세요. 내 배경 위의 muted 텍스트처럼 다른 조합을 확인하려면 명도 대비 검사기를 쓰세요.
tweakcn과는 무엇이 다른가요?
tweakcn은 모든 shadcn 변수를 슬라이더나 색상 선택기로 조절하는 오픈소스 시각 에디터이므로, 직접 세밀하게 조절하고 싶을 때 쓰세요. 이 생성기는 빠르게 시작하기 위한 도구입니다. 색상 하나를 넣으면 라이트·다크 테마 전체가 Codex용 DESIGN.md와 함께 나옵니다. 자세한 내용은 tweakcn과의 비교에서 볼 수 있습니다. 색상 하나가 아니라 이미 완성된 디자인 시스템에서 시작하고 싶다면, 모든 시스템에 shadcn 테마가 포함된 디자인 시스템 라이브러리를 둘러보세요.