主题色板
Teek 提供了一套全新的系统级色彩体系,搭配 Element Plus 的产品级色彩体系,能够满足大部分后台管理系统和数据可视化场景的需求。
所有主题色均通过 CSS 变量暴露,便于在项目中灵活调用和自定义扩展。
提示
Teek 提供的功能色会覆盖 Element Plus 的功能色。
下面展示了主题色板的设计效果:
主题色板
功能色
hover
muted
deep
light
rgb
hover
muted
deep
light
rgb
hover
muted
deep
light
rgb
hover
muted
deep
light
rgb
hover
muted
deep
light
rgb
次级色
hover
muted
deep
light
rgb
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