Theme

UnoCSS還支持您可能在Tailwind CSS/Windi CSS中熟悉的主題化系統。在用戶級別，您可以在配置中指定theme屬性，它將被深度合併到默認主題。

比如

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

TIP

在解析過程中，theme將始終存在於context中。

使用 rules

要在規則中使用主題，請執行以下操作：

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

使用 variants

要在規則中使用主題，請執行以下操作：

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

使用 shortcuts

要在動態快捷方式中使用主題，請執行以下操作：

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

斷點breakpoints

WARNING

一個例外是UnoCSS將breakpoints的完全控制權交給了用戶。當提供自定義breakpoints時，默認值將被覆蓋，而不是合併。

通過以下示例，您將只能使用 sm: and md:斷點變體：

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

INFO

verticalBreakpoints is same as breakpoints but for vertical layout.

此外，我們將按大小（相同單位）對屏幕點進行排序。對於不同單位的屏點，為了避免錯誤，請在配置中使用統一的單位。

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Because uno does not support comparison sorting of different unit sizes, please convert to the same unit.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}