zui

Appearance

主题配置 ​

本文档详细介绍了项目中使用的主题配置，包括颜色系统、排版和其他设计令牌。所有主题变量都定义在 src/styles/theme.css 文件中，可以直接在项目中通过 CSS 变量引用。

颜色系统 ​

主题提供了完整的颜色系统，每个颜色系列包含从 50（最浅）到 950（最深）的 11 个色阶，遵循 --color-{name}-{shade} 的命名规范,如--color-neutral-50

中性色 neutral ​

50
100
200
300
400
500
600
700
800
900
950

石色系列 stone ​

50
100
200
300
400
500
600
700
800
900
950

锌色系列 zinc ​

50
100
200
300
400
500
600
700
800
900
950

青灰色系列 slate ​

50
100
200
300
400
500
600
700
800
900
950

灰色系列 gray ​

50
100
200
300
400
500
600
700
800
900
950

红色系列 red ​

50
100
200
300
400
500
600
700
800
900
950

橙色系列 orange ​

50
100
200
300
400
500
600
700
800
900
950

琥珀色系列 amber ​

50
100
200
300
400
500
600
700
800
900
950

黄色系列 yellow ​

50
100
200
300
400
500
600
700
800
900
950

石灰绿系列 lime ​

50
100
200
300
400
500
600
700
800
900
950

绿色系列 green ​

50
100
200
300
400
500
600
700
800
900
950

天青色系列 teal ​

50
100
200
300
400
500
600
700
800
900
950

青色系列 cyan ​

50
100
200
300
400
500
600
700
800
900
950

天蓝色系列 sky ​

50
100
200
300
400
500
600
700
800
900
950

蓝色系列 blue ​

50
100
200
300
400
500
600
700
800
900
950

靛蓝色系列 indigo ​

50
100
200
300
400
500
600
700
800
900
950

紫罗兰色 violet ​

50
100
200
300
400
500
600
700
800
900
950

紫色系列 purple ​

50
100
200
300
400
500
600
700
800
900
950

紫红色系列 fuchsia ​

50
100
200
300
400
500
600
700
800
900
950

粉色系列 pink ​

50
100
200
300
400
500
600
700
800
900
950

玫瑰红系列 rose ​

50
100
200
300
400
500
600
700
800
900
950

使用示例 ​

在 CSS 中引用颜色变量：

css
.button-primary {
  background-color: var(--color-blue-500);
  color: var(--color-white);
  border: 1px solid var(--color-blue-300);
}

.card {
  background-color: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-800);
}

在 Vue 单文件组件中使用：

vue
<template>
  <div :style="{ backgroundColor: 'var(--color-green-50)' }"></div>
</template>

<style scoped>
.text {
  color: var(--color-purple-600);
}
</style>