Theme

UnoCSS ayrıca Tailwind CSS / Windi CSS'te aşina olabileceğiniz tema sistemini de destekler. Kullanıcı düzeyinde, yapılandırmanızda theme özelliğini belirtebilirsiniz ve bu varsayılan tema ile derinlemesine birleştirilecektir.

Usage

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

Ayrıştırma süreci sırasında, theme her zaman context'te mevcut olacaktır.

Usage in rules

Temayı kurallarda tüketmek için:

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

Usage in variants

Temayı varyantlarda tüketmek için:

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

Usage in shortcuts

Dinamik kısayollarda temayı tüketmek için:

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

Breakpoints

WARNING

Özel bir breakpoints nesnesi sağlandığında varsayılan birleştirme yerine geçersiz kılınacaktır.

Aşağıdaki örnekle, yalnızca sm: ve md: breakpoint varyantlarını kullanabilirsiniz:

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

original tema breakpoint'lerini miras almak istiyorsanız, extendTheme kullanabilirsiniz:

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

INFO

verticalBreakpoints, breakpoints ile aynıdır ancak dikey düzen içindir.

Ek olarak, ekran noktalarını boyuta göre sıralayacağız (aynı birim). Farklı birimlerdeki ekran noktaları için, hatalardan kaçınmak için lütfen yapılandırmada birleştirilmiş birimler kullanın.

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Farklı birim boyutlarının karşılaştırma sıralaması desteklenmediğinden, lütfen aynı birime dönüştürün.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme, derinlemesine birleştirilmiş temayı düzenlemenize olanak tanır ve tam tema nesnesini alır.

Özel fonksiyonlar tema nesnesini değiştirir.

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

Orijinal olanı tamamen değiştirmek için yeni bir tema nesnesi döndürmek de mümkündür.

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"
      },
    },
  }
}