Skip to content

主题色板

Teek 提供了一套全新的系统级色彩体系,搭配 Element Plus 的产品级色彩体系,能够满足大部分后台管理系统和数据可视化场景的需求。

所有主题色均通过 CSS 变量暴露,便于在项目中灵活调用和自定义扩展。

提示

Teek 提供的功能色会覆盖 Element Plus 的功能色。

下面展示了主题色板的设计效果:

主题色板

功能色

primary
hover
muted
deep
light
rgb
success
hover
muted
deep
light
rgb
warning
hover
muted
deep
light
rgb
danger
hover
muted
deep
light
rgb
error
hover
muted
deep
light
rgb

次级色

info
hover
muted
deep
light
rgb
secondary
hover
muted
deep
light
rgb

基本色

color
light
dark

背景色

bg-primary
bg-success
bg-warning
bg-danger
bg-error
bg-info
bg-secondary

中性背景色

bg-neutral
bg-neutral-light
bg-neutral-dark

灰度色

gray-100文本/背景
gray-200斑马纹/鼠标悬停
gray-300背景色/表头背景/表单禁用文字
gray-400浅边框/卡片边框
gray-500浅边框/卡片边框
gray-600按钮/表单/边框线/表单提示文字
gray-700表单禁用文字/弱文字
gray-800弱文本/辅助信息/说明文字/灰色图标
gray-900文本/辅助内容/次要图标

文本色

text-muted
text-gray-100
text-gray-200
text-gray-300
text-gray-400
text-gray-500
text-gray-600
text-gray-700
text-gray-800
text-gray-900

边框色

border-color
border-dashed-color

阴影

box-shadow-xs
box-shadow-sm
box-shadow-md
box-shadow-lg