主题管理 ​

DHdesign 的主题分三层管理：

  1. @szhn/theme-tokens 保存公司统一的基础值，比如品牌色、功能色、字号、圆角和间距。
  2. @szhn/dh-design-mobile 把这些基础值转换成移动端组件和 Vant 能识别的变量。
  3. @szhn/dh-design-pc 把这些基础值转换成 PC 组件和 Element Plus 能识别的变量。

因此，移动端看到 --dh-color-primary，PC 端看到 --dh-color-primary，并不代表有两套品牌规则。它们只是分别适配 Vant 和 Element Plus 的入口。真正的默认值应该来自 @szhn/theme-tokens。

修改主题色 ​

业务系统不要直接改 --van-* 或 --el-* 变量。推荐在应用入口处设置一次 DHdesign 主题。

ts
import { applyDhDesignTheme } from '@szhn/dh-design-mobile'

applyDhDesignTheme({
  colorPrimary: '#075AED',
})
ts
import { applyDhDesignPcTheme } from '@szhn/dh-design-pc'

applyDhDesignPcTheme({
  colorPrimary: '#075AED',
})

只传 colorPrimary 时，DHdesign 会自动推导浅色、弱色、禁用色和背景色。业务系统只有在确实需要更细的品牌控制时，才需要继续覆盖 colorPrimaryLight、colorPrimarySoft、colorPrimaryDisabled、colorPrimaryBg。

不同服务使用不同主题 ​

把每个服务的主题收敛成一个配置对象，然后在应用入口按服务选择。

ts
const serviceThemes = {
  default: {
    colorPrimary: '#075AED',
  },
  medical: {
    colorPrimary: '#0F7A5A',
  },
  emergency: {
    colorPrimary: '#B81B1B',
  },
}

移动端项目使用 applyDhDesignTheme(serviceThemes.medical)，PC 项目使用 applyDhDesignPcTheme(serviceThemes.medical)。业务页面不需要知道 Vant 或 Element Plus 的变量名。

什么时候才直接改底层变量 ​

只有两种情况建议直接改底层变量：

  1. 某个 Vant 或 Element Plus 组件有 DHdesign 暂时没有覆盖到的细节变量。
  2. 单个页面需要临时做很小范围的特殊样式。

这类改动应该写在页面局部，不要替代全局主题配置。