Thème

UnoCSS prend également en charge le système de thèmes que vous connaissez peut-être dans Tailwind CSS / Windi CSS. Au niveau utilisateur, vous pouvez spécifier la propriété theme dans votre configuration, et elle sera fusionnée en profondeur avec le thème par défaut.

Utilisation

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

Lors du processus de parsing, theme sera toujours présent dans le context.

Utilisation dans rules

Pour utiliser le thème dans les règles :

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

Utilisation dans variants

Pour utiliser le thème dans les variantes :

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

Utilisation dans shortcuts

Pour utiliser le thème dans les raccourcis dynamiques :

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

Breakpoints (points de rupture)

WARNING

Lorsqu'un objet breakpoints personnalisé est fourni, la valeur par défaut sera remplacée au lieu d'être fusionnée.

Avec l'exemple suivant, vous ne pourrez utiliser que les variantes de points de rupture sm: et md: :

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

Si vous souhaitez hériter des points de rupture du thème original, vous pouvez utiliser extendTheme :

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

INFO

verticalBreakpoints est identique à breakpoints mais pour la disposition verticale.

De plus, nous trierons les points d'écran par taille (même unité). Pour les points d'écran dans des unités différentes, afin d'éviter les erreurs, veuillez utiliser des unités unifiées dans la configuration.

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Comme uno ne prend pas en charge le tri comparatif des tailles d'unités différentes, veuillez convertir dans la même unité.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme vous permet de modifier le thème fusionné en profondeur pour obtenir l'objet thème complet.

Les fonctions personnalisées modifient l'objet thème.

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

Il est également possible de retourner un nouvel objet thème pour remplacer complètement l'original.

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