``` 我们对颜色使用一个简单的约定。`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-geist-sans: 'pingfang sc', -apple-system, blinkmacsystemfont, 'segoe ui', helvetica, 'helvetica neue', 'microsoft yahei ui', 'microsoft yahei', arial, 'hiragino sans', 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol', simsun, sans-serif; /* Default background color of ...etc */ --background: 0 0% 100%; /* 主体区域背景色 */ --background-deep: 210 11.11% 96.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: 211 91% 39%; --primary-foreground: 0 0% 98%; /* Used for destructive actions such as