``` 我们对颜色使用一个简单的约定。`background`变量用于组件的背景颜色，`foreground`变量用于文本颜色。以下组件的`background`将为`hsl(var(--primary))`，`foreground`将为`hsl(var(--primary-foreground))`。 ## 详细的CSS变量列表 ::: warning 注意 css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要加 `hsl()`和 `，`。 ::: 你可以查看下面的CSS变量列表，以了解所有可用的变量。 ::: details 默认主题 css 变量 ```css :root { --font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Default background color of ...etc */ --background: 0 0% 100%; /* 主体区域背景色 */ --background-deep: 216 20.11% 95.47%; --foreground: 210 6% 21%; /* Background color for */ --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; /* Background color for popovers such as , , */ --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; /* Muted backgrounds such as , and */ --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; /* 主题颜色 */ --primary: 212 100% 45%; --primary-foreground: 0 0% 98%; /* Used for destructive actions such as