主题

¥Theme

UnoCSS 还支持你可能在 Tailwind CSS / Windi CSS 中熟悉的主题系统。在用户级别，你可以在配置中指定 theme 属性，它将深度合并到默认主题。

¥UnoCSS also supports the theming system that you might be familiar with in Tailwind CSS / Windi CSS. At the user level, you can specify the theme property in your config, and it will be deep-merged to the default theme.

用法

¥Usage

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

提示

在解析过程中，theme 将始终存在于 context 中。

¥During the parsing process, theme will always exist in context.

rules 中的用法

¥Usage in rules

要在规则中使用主题：

¥To consume the theme in rules:

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

variants 中的用法

¥Usage in variants

要使用变体中的主题：

¥To consume the theme in variants:

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

shortcuts 中的用法

¥Usage in shortcuts

要在动态快捷方式中使用主题：

¥To consume the theme in dynamic shortcuts:

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

断点

¥Breakpoints

警告

当提供自定义 breakpoints 对象时，默认值将被覆盖而不是合并。

¥When a custom breakpoints object is provided the default will be overridden instead of merging.

通过以下示例，你将只能使用 sm: 和 md: 断点变体：

¥With the following example, you will be able to only use the sm: and md: breakpoint variants:

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

如果你想继承 original 主题断点，可以使用 extendTheme：

¥If you want to inherit the original theme breakpoints, you can use the extendTheme:

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

信息

verticalBreakpoints 与 breakpoints 相同，但用于垂直布局。

¥verticalBreakpoints is same as breakpoints but for vertical layout.

此外，我们将按大小（相同单位）对屏幕点进行排序。对于不同单位的屏幕点，为了避免错误，请在配置时使用统一的单位。

¥In addition we will sort screen points by size (same unit). For screen points in different units, in order to avoid errors, please use unified units in the configuration.

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

ExtendTheme

ExtendTheme 允许你编辑深度合并的主题以获取完整的主题对象。

¥ExtendTheme allows you to edit the deeply merged theme to get the complete theme object.

自定义函数会改变主题对象。

¥Custom functions mutate the theme object.

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

还可以返回一个新的主题对象来完全替换原始主题对象。

¥It's also possible to return a new theme object to completely replace the original one.

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