Theme

UnoCSS는 Tailwind CSS / Windi CSS에서 익숙할 수 있는 테마 시스템도 지원합니다. 사용자 수준에서 설정의 theme 속성을 지정할 수 있으며, 기본 테마에 깊이 병합됩니다.

사용법

theme: {
  // ...
  colors: {
    veryCool: '#0000ff', // class="text-very-cool"
    brand: {
      primary: 'hsl(var(--hue, 217) 78% 51%)', //class="bg-brand-primary"
      DEFAULT: '#942192' //class="bg-brand"
    },
  },
}

TIP

파싱 과정에서 theme은 항상 context에 존재합니다.

rules에서 사용

규칙에서 테마를 사용하려면:

rules: [
  [/^text-(.*)$/, ([, c], { theme }) => {
    if (theme.colors[c])
      return { color: theme.colors[c] }
  }],
]

variants에서 사용

Variant에서 테마를 사용하려면:

variants: [
  {
    name: 'variant-name',
    match(matcher, { theme }) {
      // ...
    },
  },
]

shortcuts에서 사용

동적 단축키에서 테마를 사용하려면:

shortcuts: [
  [/^badge-(.*)$/, ([, c], { theme }) => {
    if (Object.keys(theme.colors).includes(c))
      return `bg-${c}4:10 text-${c}5 rounded`
  }],
]

Breakpoints

WARNING

사용자 정의 breakpoints 객체가 제공되면 병합 대신 기본값이 재정의됩니다.

다음 예제를 사용하면 sm: 및 md: breakpoint variant만 사용할 수 있습니다:

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    md: '640px',
  },
}

original 테마 breakpoints를 상속하려면 extendTheme을 사용할 수 있습니다:

extendTheme: (theme) => {
  return {
    ...theme,
    breakpoints: {
      ...theme.breakpoints,
      sm: '320px',
      md: '640px',
    },
  }
}

INFO

verticalBreakpoints는 breakpoints와 동일하지만 세로 레이아웃용입니다.

또한 화면 포인트를 크기별로 정렬합니다(동일한 단위). 다른 단위의 화면 포인트의 경우 오류를 방지하기 위해 설정에서 통일된 단위를 사용하세요.

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Because uno does not support comparison sorting of different unit sizes, please convert to the same unit.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme을 사용하면 깊이 병합된 테마를 편집하여 완전한 테마 객체를 얻을 수 있습니다.

사용자 정의 함수는 테마 객체를 변경합니다.

extendTheme: (theme) => {
  theme.colors.veryCool = '#0000ff' // class="text-very-cool"
  theme.colors.brand = {
    primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
  }
}

새로운 테마 객체를 반환하여 원본을 완전히 대체하는 것도 가능합니다.

extendTheme: (theme) => {
  return {
    ...theme,
    colors: {
      ...theme.colors,
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
      },
    },
  }
}