设计系统
Nuxt UI 的设计系统使用 Tailwind CSS 进行简单的风格设置和轻松定制。
Tailwind CSS
Tailwind CSS 采用 CSS 优先的配置方式，让您可以使用@theme指令直接在 CSS 中定义设计令牌。这使得您的主题具有可移植性、可维护性并易于定制。
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
/* Your custom design tokens go here */
}
字体
使用 --font-* 主题变量来定制字体系列工具在您的项目中。
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--font-sans: 'Public Sans', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
颜色
使用 --color-* 主题变量来定制您的颜色或覆盖默认颜色.
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";
@theme static {
/* Override default green color */
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
/* Define new custom color */
--color-brand-50: #fef2f2;
--color-brand-100: #fee2e2;
--color-brand-200: #fecaca;
--color-brand-300: #fca5a5;
--color-brand-400: #f87171;
--color-brand-500: #ef4444;
--color-brand-600: #dc2626;
--color-brand-700: #b91c1c;
--color-brand-800: #991b1b;
--color-brand-900: #7f1d1d;
--color-brand-950: #450a0a;
}
添加自定义颜色时，请确保为每种颜色定义从
50 到 950 的所有色调。断点
使用 --breakpoint-* 主题变量来定制您的断点.
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";
@theme {
--breakpoint-3xl: 1920px;
--breakpoint-4xl: 2560px;
--breakpoint-5xl: 3840px;
}
颜色
Nuxt UI 的颜色系统围绕语义命名而不是特定的颜色值设计。这种方法使您的 UI 更易于维护，并允许轻松切换主题。
语义颜色
Nuxt UI 提供了语义颜色别名，用于描述颜色的用途。每个别名都基于您的 @theme 配置中的颜色定义，这可以是您定义的任何颜色，以及默认 Tailwind CSS 调色板.
| 颜色 | 默认值 | 描述 |
|---|---|---|
primary | 绿色 | 主要 CTA、活动导航、品牌元素、重要链接 |
次要 | 蓝色 | 辅助按钮、替代操作、补充 UI 元素 |
成功 | 绿色 | 成功消息、完成状态、积极确认 |
信息 | 蓝色 | 信息提醒、工具提示、帮助文本、中性通知 |
警告 | 黄色 | 警告消息、待处理状态、需要注意的项目 |
error | 红色 | 错误消息、验证错误、破坏性操作 |
neutral | 板岩色 | 文本、边框、背景、禁用状态 |
这些语义颜色可在 Nuxt UI 组件的 color 属性中使用
<template>
<UButton color="primary">Save Changes</UButton>
</template>
尝试使用标题中的 主题选择器，立即查看不同配色方案如何影响整个 UI！
运行时配置
您可以在运行时配置这些颜色，在您的app.config.ts文件中的 ui.colors 键下，允许动态主题定制而无需重启服务器
app.config.ts
export default defineAppConfig({
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
neutral: 'zinc'
}
}
})
您可以在运行时配置这些颜色，在您的 vite.config.ts 文件中的 ui.colors 键下，允许动态主题定制
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
neutral: 'zinc'
}
}
})
]
})
您只能使用主题中存在的颜色。要么
- 使用Tailwind 的默认颜色（如
blue,green,zinc） - 首先使用
@theme指令定义自定义颜色（如我们上面示例中的brand）
扩展颜色
您可能希望定义默认颜色之外的额外语义颜色，例如添加 tertiary 颜色
首先，在您的 nuxt.config.ts 文件中，在 ui.theme.colors 键下注册新颜色
nuxt.config.ts
export default defineNuxtConfig({
ui: {
theme: {
colors: [
'primary',
'secondary',
'tertiary',
'info',
'success',
'warning',
'error'
]
}
}
})
然后，在您的 app.config.ts 文件中，在 ui.colors 键下分配它
app.config.ts
export default defineAppConfig({
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
tertiary: 'indigo'
}
}
})
在您的 vite.config.ts 文件中注册并分配新颜色
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
theme: {
colors: [
'primary',
'secondary',
'tertiary',
'info',
'success',
'warning',
'error'
]
},
ui: {
colors: {
primary: 'blue',
secondary: 'purple',
tertiary: 'indigo'
}
}
})
]
})
最后，在支持 color 属性的组件中，或作为类使用这种新颜色
<UButton color="tertiary">
Special Action
</UButton>