Appearance
主题
¥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
ts
theme: {
// ...
colors: {
'veryCool': '#0000ff', // class="text-very-cool"
'brand': {
'primary': 'hsl(var(--hue, 217) 78% 51%)', //class="bg-brand-primary"
},
},
}
提示
在解析过程中,theme
将始终存在于 context
中。
¥During the parsing process, theme
will always exist in context
.
rules
中的用法
¥Usage in rules
要在规则中使用主题:
¥To consume the theme in rules:
ts
rules: [
[/^text-(.*)$/, ([, c], { theme }) => {
if (theme.colors[c])
return { color: theme.colors[c] }
}],
]
variants
中的用法
¥Usage in variants
要使用变体中的主题:
¥To consume the theme in variants:
ts
variants: [
{
name: 'variant-name',
match(matcher, { theme }) {
// ...
},
},
]
shortcuts
中的用法
¥Usage in shortcuts
要在动态快捷方式中使用主题:
¥To consume the theme in dynamic shortcuts:
ts
shortcuts: [
[/^badge-(.*)$/, ([, c], { theme }) => {
if (Object.keys(theme.colors).includes(c))
return `bg-${c}4:10 text-${c}5 rounded`
}],
]
断点
¥Breakpoints
警告
一个例外是 UnoCSS 将 breakpoints
的完全控制权授予用户。当提供自定义 breakpoints
时,默认值将被覆盖而不是合并。
¥One exception is that UnoCSS gives full control of breakpoints
to users. When a custom breakpoints
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:
ts
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.
ts
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',
},
}