Tema

UnoCSS supporta anche il sistema di temi che potresti conoscere da Tailwind CSS / Windi CSS. A livello utente, puoi specificare la proprietà theme nella tua configurazione, e verrà unita in profondità al tema predefinito.

Utilizzo

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

Durante il processo di parsing, theme esisterà sempre in context.

Utilizzo in rules

Per utilizzare il tema nelle regole:

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

Utilizzo in variants

Per utilizzare il tema nelle varianti:

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

Utilizzo in shortcuts

Per utilizzare il tema nelle scorciatoie dinamiche:

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

Breakpoints

WARNING

Quando viene fornito un oggetto breakpoints personalizzato, quello predefinito verrà sovrascritto invece di essere unito.

Con il seguente esempio, sarai in grado di usare solo le varianti breakpoint sm: e md::

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

Se vuoi ereditare i breakpoint del tema original, puoi usare extendTheme:

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

INFO

verticalBreakpoints è lo stesso di breakpoints ma per il layout verticale.

Inoltre ordineremo i punti dello schermo per dimensione (stessa unità). Per i punti dello schermo in unità diverse, per evitare errori, usa unità unificate nella configurazione.

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Poiché uno non supporta l'ordinamento comparativo di dimensioni di unità diverse, converti alla stessa unità.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme ti permette di modificare il tema unito in profondità per ottenere l'oggetto tema completo.

Le funzioni personalizzate mutano l'oggetto tema.

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

È anche possibile restituire un nuovo oggetto tema per sostituire completamente quello originale.

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