Tema

O UnoCSS também suporta o sistema de temas que você pode conhecer no Tailwind CSS / Windi CSS. No nível do usuário, você pode especificar a propriedade theme na sua configuração, e ela será mesclada profundamente com o tema padrão.

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 o processo de análise, theme sempre existirá no context.

Uso em rules

Para consumir o tema em regras:

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

Uso em variants

Para consumir o tema em variantes:

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

Uso em shortcuts

Para consumir o tema em atalhos dinâmicos:

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

Pontos de Quebra

WARNING

Quando um objeto breakpoints personalizado é fornecido, o padrão será substituído em vez de mesclado.

Com o seguinte exemplo, você poderá usar apenas as variantes de ponto de quebra sm: e md::

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

Se você quiser herdar os pontos de quebra do tema original, pode usar o extendTheme:

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

INFO

verticalBreakpoints é igual a breakpoints, mas para layout vertical.

Além disso, classificaremos os pontos de tela por tamanho (mesma unidade). Para pontos de tela em unidades diferentes, para evitar erros, use unidades unificadas na configuração.

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Como o uno não suporta classificação comparativa de tamanhos de unidades diferentes, converta para a mesma unidade.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme permite editar o tema mesclado profundamente para obter o objeto de tema completo.

Funções personalizadas mutam o 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"
  }
}

Também é possível retornar um novo objeto de tema para substituir completamente o 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"
      },
    },
  }
}