Skip to main content
框架基于 shadcn-vue 和 tailwindcss 构建，提供了丰富的主题配置，可以通过简单的配置实现各种主题切换，满足个性化需求。您可以选择使用 CSS 变量或 Tailwind CSS 实用程序类进行主题设置。

​
Css 变量

项目遵循 shadcn-vue 的主题配置，示例： 
<div class="bg-background text-foreground" />
我们对颜色使用一个简单的约定。background变量用于组件的背景颜色，foreground变量用于文本颜色。 以下组件的background将为hsl(var(--primary))，foreground将为hsl(var(--primary-foreground))。

​
详细的CSS变量列表

css 变量内的颜色，必须使用 hsl 格式，如 0 0% 100%，不需要加 hsl()和 ，。
你可以查看下面的CSS变量列表，以了解所有可用的变量。

​
覆盖默认的 CSS 变量

你只需要在你的项目中覆盖你想要修改的 CSS 变量即可。例如，要更改默认卡片背景色，你可以在你的 CSS 文件中添加以下内容进行覆盖：

​
默认主题下

:root {
  /* Background color for <Card /> */
  --card: 0 0% 30%;
}

​
黑暗模式下

.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
  /* Background color for <Card /> */
  --card: 222.34deg 10.43% 12.27%;
}

​
更改品牌主色

  • 需要使用 hsl 格式颜色格式。
  • 修改后需要清空缓存才可生效。
  • 你可以借助 第三方工具来转换颜色。
只需要在应用目录下的preferences.ts，自定义配置主色即可： 
import { defineOverridesPreferences } from '@vben/preferences';

export const overridesPreferences = defineOverridesPreferences({
  // overrides
  theme: {
    // 错误色
    colorDestructive: 'hsl(348 100% 61%)',
    // 主题色
    colorPrimary: 'hsl(212 100% 45%)',
    // 成功色
    colorSuccess: 'hsl(144 57% 58%)',
    // 警告色
    colorWarning: 'hsl(42 84% 61%)',
  },
});

​
内置主题

框架中内置了多种主题，你可以在preferences.ts中进行配置： 
import { defineOverridesPreferences } from '@vben/preferences';

export const overridesPreferences = defineOverridesPreferences({
  // overrides
  theme: {
    builtinType: 'default',
  },
});

​
内置主题列表

框架内置了 16种主题，且还支持自定义主题。理论上，你可以无限制的扩展主题。

​
新增主题

想要新增主题，只需按照以下步骤进行：
  • 在应用的 src/preferences.ts内新增一个主题配置。
import { defineOverridesPreferences } from '@vben/preferences';

export const overridesPreferences = defineOverridesPreferences({
  // overrides
  theme: {
    builtinType: 'my-theme',
  },
});
  • 在你的css文件中，新增主题的css变量。
/* light */
[data-theme='my-theme'] {
  --foreground: 224 71.4% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 224 71.4% 4.1%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 71.4% 4.1%;
  --primary-foreground: 210 20% 98%;
  --secondary: 220 14.3% 95.9%;
  --secondary-foreground: 220.9 39.3% 11%;
  --muted: 220 14.3% 95.9%;
  --muted-foreground: 220 8.9% 46.1%;
  --accent: 220 14.3% 95.9%;
  --accent-foreground: 220.9 39.3% 11%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 20% 98%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 262.1 83.3% 57.8%;
}

/* dark */
.dark[data-theme='my-theme'],
[data-theme='my-theme'] .dark {
  --background: 224 71.4% 4.1%;
  --background-deep: var(--background);
  --foreground: 210 20% 98%;
  --card: 224 71.4% 4.1%;
  --card-foreground: 210 20% 98%;
  --popover: 224 71.4% 4.1%;
  --popover-foreground: 210 20% 98%;
  --primary-foreground: 210 20% 98%;
  --secondary: 215 27.9% 16.9%;
  --secondary-foreground: 210 20% 98%;
  --muted: 215 27.9% 16.9%;
  --muted-foreground: 217.9 10.6% 64.9%;
  --accent: 215 27.9% 16.9%;
  --accent-foreground: 210 20% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 20% 98%;
  --border: 215 27.9% 16.9%;
  --input: 215 27.9% 16.9%;
  --ring: 263.4 70% 50.4%;
  --sidebar: 224 71.4% 4.1%;
  --sidebar-deep: 224 71.4% 4.1%;
}

​
黑暗模式

框架中内置了多种主题，你可以在preferences.ts中进行配置，黑暗主题同样会读取css变量来进行配置： 
import { defineOverridesPreferences } from '@vben/preferences';

export const overridesPreferences = defineOverridesPreferences({
  // overrides
  theme: {
    mode: 'dark',
  },
});

​
自定义侧边栏颜色

侧边栏颜色通过--sidebar变量来配置

​
默认主题下

:root {
  --sidebar: 0 0% 100%;
}

​
黑暗模式下

.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
  --sidebar: 222.34deg 10.43% 12.27%;
}

​
自定义顶栏颜色

侧边栏颜色通过--header变量来配置

​
默认主题下

:root {
  --header: 0 0% 100%;
}

​
黑暗模式下

.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
  --header: 222.34deg 10.43% 12.27%;
}

​
色弱模式

一般用于特殊场景，将设置为色弱模式，你可以在preferences.ts中进行配置： 
import { defineOverridesPreferences } from '@vben/preferences';

export const overridesPreferences = defineOverridesPreferences({
  // overrides
  app: {
    colorWeakMode: true,
  },
});

​
灰色模式

一般用于特殊场景，将网页置灰，你可以在preferences.ts中进行配置： 
import { defineOverridesPreferences } from '@vben/preferences';

export const overridesPreferences = defineOverridesPreferences({
  // overrides
  app: {
    colorGrayMode: true,
  },
});