# Theme The framework is built on [shadcn-vue](https://www.shadcn-vue.com/themes.html) and [tailwindcss](https://tailwindcss.com/), offering a rich theme configuration. You can easily switch between various themes through simple configuration to meet personalized needs. You can choose to use CSS variables or Tailwind CSS utility classes for theme settings. ## CSS Variables The project follows the theme configuration of [shadcn-vue](https://www.shadcn-vue.com/themes.html), for example: ```html
``` We use a simple convention for colors. The `background` variable is used for the background color of components, and the `foreground` variable is used for text color. For the following components, `background` will be `hsl(var(--primary))`, and `foreground` will be `hsl(var(--primary-foreground))`. ## Detailed List of CSS Variables ::: warning Note The colors inside CSS variables must use the `hsl` format, such as `0 0% 100%`, without adding `hsl()` and `,`. ::: You can check the list below to understand all the available variables. ::: details Default theme CSS variables ```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%; /* Main area background color */ --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%; /* Theme Colors */ --primary: 211 91% 39%; --primary-foreground: 0 0% 98%; /* Used for destructive actions such as