主题调整或定制

[typistZxd]

场景：

1. 主题风格切换
2. 组件样式定制
3. 动态修改主题

分析：

整体主题风格

// js入口
import '@idux/components/style/themes/default.less'
import '@idux/components/style/themes/dark.less'

document.documentElement.setAttribute('theme-mode', 'dark'); // 业务中切换到现有的主题

• 基础css主题变量按主题通过:root[theme='dark']区分（按需引入对应less文件）
• 基础less变量（如packages/components/style/variable/color/color.less）使用上述css主题变量

组件样式定制

• 构建包输出less，业务构建工具结合less-loader的modifyVars实现less变量覆盖

动态修改主题

• 通过cdk去修改目标dom（默认为html）上的基础css变量
• 通过deep修改目标组件的特定属性