Temă

UnoCSS suportă, de asemenea, sistemul de teme cu care poate fiți familiarizat din Tailwind CSS / Windi CSS. La nivel de utilizator, puteți specifica proprietatea theme în configurarea dvs., și aceasta va fi îmbinită profund cu tema implicită.

Utilizare

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

În timpul procesului de parsare, theme va exista întotdeauna în context.

Utilizare în rules

Pentru a consuma tema în reguli:

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

Utilizare în variants

Pentru a consuma tema în variante:

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

Utilizare în shortcuts

Pentru a consuma tema în prescurtări dinamice:

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

Puncte de întrerupere

WARNING

Când un obiect personalizat breakpoints este furnizat, implicitul va fi suprascris în loc de îmbinare.

Cu următorul exemplu, veți putea utiliza doar variantele de puncte de întrerupere sm: și md::

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

Dacă doriți să moșteniți punctele de întrerupere ale temei original, puteți utiliza extendTheme:

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

INFO

verticalBreakpoints este la fel ca breakpoints dar pentru aspect vertical.

În plus, vom sorta punctele ecranului după dimensiune (aceeași unitate). Pentru punctele ecranului în unități diferite, pentru a evita erorilor, vă rugăm să utilizați unități unificate în configurare.

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Deoarece uno nu suportă sortare prin comparație de dimensiuni diferite ale unităților, vă rugăm să convertiți la aceeași unitate.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme vă permite să editați tema îmbinită profund pentru a obține obiectul complet al temei.

Funcțiile personalizate mută obiectul temei.

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

De asemenea, este posibil să returnați un nou obiect temă pentru a înlocui complet originalul.

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