테마 적용

테마 적용 (Theming)

shadcn/ui에서 테마를 적용하는 방법은 크게 두 가지예요. Tailwind CSS 유틸리티 클래스를 쓰는 방법과 CSS 변수를 쓰는 방법이죠. 어느 쪽을 선택할지는 components.json의 설정 하나로 결정돼요. 하나씩 살펴볼게요.

출처: 문서

본문

테마 적용에는 CSS 변수나 Tailwind CSS 유틸리티 클래스를 선택해서 사용할 수 있어요.

유틸리티 클래스

<div className="bg-zinc-950 dark:bg-white" />

테마 적용에 유틸리티 클래스를 사용하려면 components.json 파일에서 tailwind.cssVariables를 false로 설정하면 돼요.

{
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

CSS 변수

<div className="bg-background text-foreground" />

테마 적용에 CSS 변수를 사용하려면 components.json 파일에서 tailwind.cssVariables를 true로 설정하면 돼요.

{
  "style": "default",
  "rsc": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

컨벤션

색상에는 간단한 background와 foreground 컨벤션을 사용해요. 컴포넌트의 배경색에는 background 변수를, 텍스트 색에는 foreground 변수를 사용해요.

다음과 같은 CSS 변수가 있다고 할게요:

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

아래 컴포넌트의 background 색은 hsl(var(--primary))가 되고, foreground 색은 hsl(var(--primary-foreground))가 돼요.

<div className="bg-primary text-primary-foreground">Hello</div>

사용 가능한 변수 목록

커스터마이즈할 수 있는 변수 목록은 다음과 같아요:

--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;

--border: 214.3 31.8% 91.4%;

--input: 214.3 31.8% 91.4%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;

--ring: 215 20.2% 65.1%;

--radius: 0.5rem;

새 색상 추가하기

새 색상을 추가하려면 CSS 파일과 tailwind.config.js 파일 양쪽에 모두 추가해야 해요.

:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}

.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}

이제 컴포넌트에서 warning 유틸리티 클래스를 사용할 수 있어요.

<div className="bg-warning text-warning-foreground" />

다른 색상 형식

테마 적용에는 HSL 색상을 추천하지만, 다른 색상 형식을 쓰고 싶다면 그것도 가능해요. rgb, rgba, hsl 색상 사용에 대한 자세한 내용은 Tailwind CSS 문서를 참고해요.

더 알아보기 (Learn more)

• Tailwind CSS: CSS 변수로 커스터마이징하기
• HSL 색상 가이드