Tema

UnoCSS también soporta el sistema de temas que podrías estar familiarizado en Tailwind CSS / Windi CSS. A nivel de usuario, puedes especificar la propiedad theme en tu configuración, y se fusionará profundamente con el tema por defecto.

Uso

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 el proceso de análisis, theme siempre existirá en context.

Uso en rules

Para consumir el tema en reglas:

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

Uso en variants

Para consumir el tema en variantes:

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

Uso en shortcuts

Para consumir el tema en atajos dinámicos:

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

Breakpoints

WARNING

Cuando se proporciona un objeto breakpoints personalizado, el por defecto se sobrescribirá en lugar de fusionarse.

Con el siguiente ejemplo, podrás usar solo las variantes de breakpoint sm: y md::

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

Si quieres heredar los breakpoints del tema original, puedes usar extendTheme:

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

INFO

verticalBreakpoints es igual que breakpoints pero para diseño vertical.

Además ordenaremos los puntos de pantalla por tamaño (misma unidad). Para puntos de pantalla en diferentes unidades, para evitar errores, por favor usa unidades unificadas en la configuración.

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Porque uno no soporta comparación de ordenamiento de diferentes tamaños de unidad, por favor convierte a la misma unidad.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme te permite editar el tema fusionado profundamente para obtener el objeto de tema completo.

Las funciones personalizadas mutan el objeto de 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"
  }
}

También es posible devolver un nuevo objeto de tema para reemplazar completamente el 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"
      },
    },
  }
}