daisyUI 5 색상 규칙

daisyUI 5 색상

daisyUI 색상 이름

• primary: 주요 브랜드 색상.
• primary-content: primary 위에서 사용할 전경 콘텐츠 색상.
• secondary: 선택적인 보조 브랜드 색상.
• secondary-content: secondary 위에서 사용할 전경 콘텐츠 색상.
• accent: 선택적인 강조 브랜드 색상.
• accent-content: accent 위에서 사용할 전경 콘텐츠 색상.
• neutral: 채도가 높지 않은 UI 영역에 사용하는 어두운 중성 색상.
• neutral-content: neutral 위에서 사용할 전경 콘텐츠 색상.
• base-100: 기본 배경을 위한 페이지 베이스 표면 색상.
• base-200: 더 어두운 베이스 음영으로, 입체감을 줍니다.
• base-300: 더욱 어두운 베이스 음영으로, 더 많은 입체감을 줍니다.
• base-content: 베이스 색상 위에서 사용할 전경 콘텐츠 색상.
• info: 정보 및 도움말 메시지용 색상.
• info-content: info 위에서 사용할 전경 콘텐츠 색상.
• success: 성공 및 안전 상태 메시지용 색상.
• success-content: success 위에서 사용할 전경 콘텐츠 색상.
• warning: 경고 및 주의 메시지용 색상.
• warning-content: warning 위에서 사용할 전경 콘텐츠 색상.
• error: 오류, 위험, 파괴적 행동 메시지용 색상.
• error-content: error 위에서 사용할 전경 콘텐츠 색상.

daisyUI 색상 규칙

1. daisyUI는 Tailwind CSS 색상에 의미론적 색상 이름을 추가합니다.
2. 다른 Tailwind CSS 색상 이름을 사용하는 것처럼 유틸리티 클래스에서 daisyUI 색상 이름을 사용하세요. 예를 들어, bg-primary는 배경에 기본 색상을 사용합니다.
3. 각 daisyUI 색상 이름의 값은 변수입니다. 따라서 색상이 테마에 따라 변경될 수 있습니다.
4. daisyUI 색상 이름과 함께 dark:를 사용하지 마세요.
5. 가능하면 daisyUI 색상 이름만 사용하세요. 이렇게 하면 색상이 테마에 따라 자동으로 변경됩니다.
6. red-500과 같은 Tailwind CSS 색상 이름을 사용하면 모든 테마에서 색상이 동일하게 유지됩니다.
7. primary와 같은 daisyUI 색상 이름을 사용하면 테마에 따라 색상이 변경됩니다.
8. 텍스트에 Tailwind CSS 색상 이름을 사용하지 마세요. 예를 들어, bg-base-100 위에 text-gray-800을 사용하면 어두운 테마에서 bg-base-100이 어둡기 때문에 읽을 수 없게 됩니다.
9. *-content 색상은 관련 색상과 명확한 대비를 유지해야 합니다.
10. 페이지의 대부분에는 base-* 색상을 사용하세요. 모든 요소에는 기본 변형을 사용하세요. primary는 페이지에서 가장 중요한 요소에만 사용하고, 한 번만 사용하세요.
11. 드문 경우지만, 콘텐츠가 모든 테마에서 동일한 색상을 유지해야 하는 경우 Tailwind CSS 색상을 사용할 수 있습니다. 예를 들어, text-error 대신 text-red-500을 사용할 수 있습니다. SVG 아이콘이나 차트의 경우 고정 색상이 필요할 수 있습니다.

테마 활성화 및 적용

기본 설정은 light와 dark를 활성화합니다. daisyUI 플러그인에서 특정 테마, 모든 테마, 또는 내장 테마 없음을 선택하세요:

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

• 모든 내장 테마를 활성화하려면 themes: all;을 사용하세요.
• 모든 내장 테마를 비활성화하려면 themes: false;를 사용하세요. 보통 사용자 정의 테마만 정의하기 전에 이렇게 합니다.
• <html> 또는 중첩된 요소에 data-theme="THEME_NAME"을 추가하세요. 깊이 제한 없이 테마를 중첩할 수 있습니다.

<html data-theme="dark">
  <section data-theme="light">
    <div data-theme="retro">중첩된 테마</div>
  </section>
</html>

사용자 정의 색상을 가진 daisyUI 사용자 정의 테마

Tailwind CSS, daisyUI 및 사용자 정의 daisyUI 테마가 포함된 CSS 파일은 다음과 같은 구조를 가집니다:

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* 기본값으로 설정 */
  prefersdark: false; /* 기본 다크 모드(prefers-color-scheme:dark)로 설정 */
  color-scheme: light; /* 브라우저가 제공하는 UI의 색상 */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem; /* 선택자(체크박스, 토글, 배지)의 테두리 반경 */
  --radius-field: 0.25rem; /* 필드(버튼, 입력, 선택, 탭)의 테두리 반경 */
  --radius-box: 0.5rem; /* 박스(카드, 모달, 알림)의 테두리 반경 */
  /* --radius-* 선호 값: 0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* 선택자(체크박스, 토글, 배지)의 기본 크기. 의도적으로 더 큰 선택자를 원하지 않는 한 값은 0.25rem이어야 합니다. 더 크게 하려면 0.28125 또는 0.3125를 사용할 수 있습니다. 더 작게 하려면 0.21875 또는 0.1875를 사용할 수 있습니다. */
  --size-field: 0.25rem; /* 필드(버튼, 입력, 선택, 탭)의 기본 크기. 의도적으로 더 큰 필드를 원하지 않는 한 값은 0.25rem이어야 합니다. 더 크게 하려면 0.28125 또는 0.3125를 사용할 수 있습니다. 더 작게 하려면 0.21875 또는 0.1875를 사용할 수 있습니다. */

  --border: 1px; /* 테두리 크기. 의도적으로 더 두꺼운 테두리를 원하지 않는 한 값은 1px이어야 합니다. 더 두껍게 하려면 1.5px 또는 2px를 사용할 수 있습니다. 더 얇게 하려면 0.5px를 사용할 수 있습니다. */

  --depth: 1; /* 0 또는 1만 가능 - 구성 요소에 그림자와 미세한 3D 입체 효과를 추가합니다. */
  --noise: 0; /* 0 또는 1만 가능 - 구성 요소에 미세한 노이즈(그레인) 효과를 추가합니다. */
}

규칙

• 예제의 모든 CSS 변수를 포함해야 합니다.
• 색상은 OKLCH, 16진수 또는 다른 형식을 사용할 수 있습니다.
• 사용자 정의 테마를 생성하는 경우 예제의 주석을 포함하지 마세요. 코드만 제공하세요.

선택 사항: https://daisyui.com/theme-generator/ 에서 비주얼 도구를 사용하여 사용자 정의 테마를 만들 수 있습니다.

내장 테마 변경

내장 테마 이름을 사용하세요. 필요한 값만 변경하세요. daisyUI는 다른 값을 상속합니다:

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: blue;
  --color-secondary: teal;
}

사용자 정의 CDN 테마의 경우 선택자에 동일한 변수를 정의하세요. 선택자는 선택한 data-theme 및 테마 컨트롤러와 일치해야 합니다:

:root:has(input.theme-controller[value=mytheme]:checked),
[data-theme="mytheme"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.3 240);
  /* 나머지 사용자 정의 테마 변수 정의 */
}

Tailwind dark: 변형이 하나 이상의 daisyUI 테마를 따르도록 하려면 사용자 정의 변형을 정의하세요:

@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));