테마 설정 - shadcn-solid 한국어

문서

테마 설정

CSS 변수 또는 원하는 CSS 프레임워크를 사용하여 테마를 설정합니다.

테마 설정을 위해 CSS 변수를 사용하거나 원하는 CSS 프레임워크의 유틸리티 클래스를 사용할 수 있습니다.

유틸리티 클래스

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

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

components.json

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

또는 uno를 사용합니다.

components.json

{
  "style": "default",
  "uno": {
    "config": "uno.config.ts",
    "css": "app/app.css",
    "baseColor": "slate",
    "cssVariables": false
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

CSS 변수

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

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

components.json

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

또는 uno를 사용합니다.

components.json

{
  "style": "default",
  "uno": {
    "config": "uno.config.ts",
    "css": "app/app.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

규칙

색상에 대해 간단한 background와 foreground 규칙을 사용합니다. background 변수는 컴포넌트의 배경색에 사용되고 foreground 변수는 텍스트 색상에 사용됩니다.

변수가 컴포넌트의 배경색으로 사용될 때는 background 접미사가 생략됩니다.

다음 CSS 변수가 주어졌을 때

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

다음 컴포넌트의 background 색상은 hsl(var(--primary))이 되고, foreground 색상은 hsl(var(--primary-foreground))가 됩니다.

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

CSS 변수는 색 공간 함수 없이 정의해야 합니다. 자세한 내용은 Tailwind CSS 문서를 참조하세요.

변수 목록

다음은 사용자 정의할 수 있는 변수 목록입니다.

<body /> 등의 기본 배경색

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

<TabsList />, <Skeleton />, <Switch />와 같은 음소거된 배경

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

<Card />의 배경색

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

<DropdownMenu />, <HoverCard />, <Popover />와 같은 팝오버의 배경색

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

기본 테두리 색상

--border: 214.3 31.8% 91.4%;

<TextField />, <Select />, <Textarea />와 같은 입력 필드의 테두리 색상

--input: 214.3 31.8% 91.4%;

<Button />의 기본 색상

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

<Button />의 보조 색상

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

<DropdownMenuItem>, <SelectItem> 등의 호버 효과와 같은 강조에 사용됩니다.

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

<Button variant= 와 같은 파괴적인 작업에 사용됩니다.

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

포커스 링에 사용됩니다.

--ring: 215 20.2% 65.1%;

카드, 입력 필드, 버튼의 테두리 반지름

--radius: 0.5rem;

새로운 색상 추가하기

새로운 색상을 추가하려면 CSS 파일과 tailwind.config.js 파일에 추가해야 합니다.

app/app.css

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

tailwind.config.js

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

또는 uno를 사용합니다.

uno.config.ts

export default defineConfig({
  theme: {
    colors: {
      warning: "hsl(var(--warning))",
      "warning-foreground": "hsl(var(--warning-foreground))"
    }
  }
});

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

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

다른 색상 형식

테마 설정에는 HSL 색상을 사용하는 것을 권장하지만, 원한다면 다른 색상 형식을 사용할 수도 있습니다.

rgb, rgba 또는 hsl 색상 사용에 대한 자세한 내용은 Tailwind CSS 문서를 참조하세요.

components.json 다크 모드