[comp:utils] 如果想定制化主题，需要怎么处理？

[lvzero535]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

解决主题定制化问题

What does the proposed API look like?

覆盖原有样式，简单操作最好

[idux-bot[bot]]

Translation of this issue:

[Comp: Utils] If you want to customize the theme, how do you need to deal with?

• [x] i Have Searched The [https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.

What proBLEES THIS Feature SOLVE?

Solve the topic customization problem

What does The proposed API Look Like?

Cover the original style, simple operation is best

[Violet-VE]

观文档组件底下有主题变量，请问如何使用(⊙_⊙) 是还没做好功能还是没有文档(´⊙ω⊙`) 我再研究研究吧〒▽〒 @danranVm

[danranVm]

观文档组件底下有主题变量，请问如何使用(⊙_⊙) 是还没做好功能还是没有文档(´⊙ω⊙`) 我再研究研究吧〒▽〒 @danranVm

@Violet-VE 文档还没有补充~有两种使用方式：

• 直接 import idux 的 less 文件，然后覆盖掉 less 变量就好了，例如：

  @import '@idux/components/style/core/reset.default.less';
  @import '@idux/components/style/core/reset-scroll.default.less';
  @import '@idux/components/default.less';
  @import '@idux/pro/default.less';
   
  // 表单
  @form-item-label-color: #6F7785;
  @form-item-label-required-color: #CF171D;

• 或者在编译工具中覆盖 less 变量，以 vite 为例：

export default defineConfig(async ({ mode, command }: ConfigEnv): Promise<UserConfig> => {

 return {
   css: {
     preprocessorOptions: {
       less: {
         globalVars: generateGlobalVars(),
         modifyVars: generateModifyVars(),
         javascriptEnabled: true,
       },
     },
   },
 };
});

[danranVm]

参见 https://idux.site/docs/customize-theme/zh