Color 色彩
dh-design-pc 沿用 Element Plus 的色彩体系，通过一组经过验证的调色板保证产品视觉风格的统一。所有颜色均以 CSS 变量暴露，可以在任意场景下复用。
基础色板
覆盖常用的品牌色、语义色及中性色总览，适合作为快速查阅。
<template>
<div class="demo-color">
<div v-for="color in colors" :key="color.name" class="demo-color-item">
<div class="demo-color-block" :style="{ background: `var(${color.var})` }" />
<span class="demo-color-name">{{ color.name }}</span>
</div>
</div>
</template>
<script lang="ts" setup>
const colors = [
{ name: 'Primary', var: '--el-color-primary' },
{ name: 'Success', var: '--el-color-success' },
{ name: 'Warning', var: '--el-color-warning' },
{ name: 'Danger', var: '--el-color-danger' },
{ name: 'Info', var: '--el-color-info' },
]
</script>
<style scoped>
.demo-color {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.demo-color-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.demo-color-block {
width: 80px;
height: 48px;
border-radius: var(--el-border-radius-base);
}
.demo-color-name {
font-size: 12px;
color: var(--el-text-color-secondary);
}
</style>主色
主色用于品牌表达与关键操作。DHdesign 主色默认是明亮友好的蓝色，通过 --el-color-primary 及 --el-color-primary-light-* 提供从深到浅的 10 级变体。
<template>
<div class="demo-color">
<div
v-for="c in colors"
:key="c.name"
class="demo-color-card"
:style="{ background: c.value, color: c.fg }"
>
<div class="demo-color-name">{{ c.name }}</div>
<div class="demo-color-value">{{ c.var }}</div>
</div>
</div>
</template>
<script lang="ts" setup>
const colors = [
{ name: 'Primary', value: 'var(--el-color-primary)', var: '--el-color-primary', fg: '#fff' },
{ name: 'Primary Light 3', value: 'var(--el-color-primary-light-3)', var: '--el-color-primary-light-3', fg: '#fff' },
{ name: 'Primary Light 5', value: 'var(--el-color-primary-light-5)', var: '--el-color-primary-light-5', fg: '#fff' },
{ name: 'Primary Light 7', value: 'var(--el-color-primary-light-7)', var: '--el-color-primary-light-7', fg: 'var(--el-text-color-primary)' },
{ name: 'Primary Light 9', value: 'var(--el-color-primary-light-9)', var: '--el-color-primary-light-9', fg: 'var(--el-text-color-primary)' },
]
</script>
<style scoped>
.demo-color {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.demo-color-card {
padding: 20px 16px;
border-radius: var(--el-border-radius-base);
display: flex;
flex-direction: column;
gap: 4px;
}
.demo-color-name { font-weight: 600; font-size: 14px; }
.demo-color-value { font-size: 12px; opacity: .85; font-family: var(--el-font-family, monospace); }
</style>辅助色
除主色以外，不同语义场景使用不同的颜色（如 danger 代表危险操作）。
<template>
<div class="demo-color">
<div
v-for="c in colors"
:key="c.name"
class="demo-color-card"
:style="{ background: c.value }"
>
<div class="demo-color-title">{{ c.name }}</div>
<div class="demo-color-sub">{{ c.var }}</div>
</div>
</div>
</template>
<script lang="ts" setup>
const colors = [
{ name: 'Success', value: 'var(--el-color-success)', var: '--el-color-success' },
{ name: 'Warning', value: 'var(--el-color-warning)', var: '--el-color-warning' },
{ name: 'Danger', value: 'var(--el-color-danger)', var: '--el-color-danger' },
{ name: 'Error', value: 'var(--el-color-error)', var: '--el-color-error' },
{ name: 'Info', value: 'var(--el-color-info)', var: '--el-color-info' },
]
</script>
<style scoped>
.demo-color {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.demo-color-card {
padding: 20px 16px;
border-radius: var(--el-border-radius-base);
color: #fff;
}
.demo-color-title { font-weight: 600; font-size: 14px; }
.demo-color-sub { font-size: 12px; opacity: .85; }
</style>中性色
中性色用于文本、边框和背景，通过不同的明度表达信息层级。
<template>
<div class="demo-neutral">
<section>
<h4>文本颜色</h4>
<div class="row">
<div v-for="c in texts" :key="c.var" class="cell" :style="{ color: `var(${c.var})` }">
<div class="preview">永和九年 Aa</div>
<div class="label">{{ c.name }}</div>
<div class="var">{{ c.var }}</div>
</div>
</div>
</section>
<section>
<h4>边框颜色</h4>
<div class="row">
<div v-for="c in borders" :key="c.var" class="cell">
<div class="preview border" :style="{ borderColor: `var(${c.var})` }" />
<div class="label">{{ c.name }}</div>
<div class="var">{{ c.var }}</div>
</div>
</div>
</section>
<section>
<h4>填充颜色</h4>
<div class="row">
<div v-for="c in fills" :key="c.var" class="cell">
<div class="preview fill" :style="{ background: `var(${c.var})` }" />
<div class="label">{{ c.name }}</div>
<div class="var">{{ c.var }}</div>
</div>
</div>
</section>
</div>
</template>
<script lang="ts" setup>
const texts = [
{ name: 'Primary', var: '--el-text-color-primary' },
{ name: 'Regular', var: '--el-text-color-regular' },
{ name: 'Secondary', var: '--el-text-color-secondary' },
{ name: 'Placeholder', var: '--el-text-color-placeholder' },
{ name: 'Disabled', var: '--el-text-color-disabled' },
]
const borders = [
{ name: 'Darker', var: '--el-border-color-darker' },
{ name: 'Dark', var: '--el-border-color-dark' },
{ name: 'Default', var: '--el-border-color' },
{ name: 'Light', var: '--el-border-color-light' },
{ name: 'Lighter', var: '--el-border-color-lighter' },
{ name: 'ExtraLight', var: '--el-border-color-extra-light' },
]
const fills = [
{ name: 'Darker', var: '--el-fill-color-darker' },
{ name: 'Dark', var: '--el-fill-color-dark' },
{ name: 'Default', var: '--el-fill-color' },
{ name: 'Light', var: '--el-fill-color-light' },
{ name: 'Lighter', var: '--el-fill-color-lighter' },
{ name: 'ExtraLight', var: '--el-fill-color-extra-light' },
{ name: 'Blank', var: '--el-fill-color-blank' },
]
</script>
<style scoped>
.demo-neutral { display: flex; flex-direction: column; gap: 20px; }
h4 { margin: 0 0 10px; font-size: 14px; color: var(--el-text-color-regular); }
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.cell {
padding: 12px;
border: 1px solid var(--el-border-color-lighter);
border-radius: var(--el-border-radius-base);
background: var(--el-bg-color);
}
.preview {
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
border-radius: 4px;
margin-bottom: 6px;
}
.preview.border { border: 2px solid; }
.preview.fill { background: var(--el-fill-color-light); }
.label { font-size: 12px; font-weight: 600; color: var(--el-text-color-primary); }
.var { font-size: 11px; color: var(--el-text-color-secondary); font-family: monospace; }
</style>扩展色板
dh-design-pc 在 Element Plus 的基础上补充了十二套扩展色板，用于业务场景中的数据可视化、状态标识等。
<script setup lang="ts">
import ColorPalettes from '../../../.vitepress/theme/components/ColorPalettes.vue'
</script>
<template>
<ColorPalettes />
</template>API
DHdesign 色彩体系以 CSS 变量的形式提供，可直接在样式中使用。
| 变量前缀 | 说明 |
|---|---|
--el-color-primary | 主色及其 light-3 ~ light-9、dark-2 变体 |
--el-color-success / warning / danger / error / info | 语义色及其 light-* 变体 |
--el-text-color-* | 文本颜色层级 |
--el-border-color-* | 边框颜色层级 |
--el-fill-color-* | 填充颜色层级 |
--el-bg-color-* | 背景颜色层级 |
更多色彩规范与取值参见 Element Plus Color。