arco.design自定义主题包

1、现在主题商店新建一个主题

必填项填完后，点击确定。

组件库版本需要与你当前的arco.design版本一致

2、进入主题定制页面

来到这个页面，你就可以自定义主题了，如果在颜色里面修改了对应的色值，那么在下面组件的定制时时可以实时预览效果的。

这里可以看到当前主题应用的arco.design版本以及当前主题库的npm包名

3、主题发布

发布前可以修改主题版本，这个主题版本对应的就是npm包的版本，并且该窗口可以预览哪些地方的ui做了修改。点击发布后，该包会自动上传到npm。

4、主题安装

npm中可以看到你刚才发布的包。
在项目中安装依赖

npm i @arco-themes/vue-sd-pad

5、在main.ts中引入依赖

import "@arco-themes/vue-sd-pad/index.less";

此时需要注意，如果使用自定义主题，那么你必需去掉arco的默认样式引入

// import "@arco-design/web-vue/dist/arco.css"; // 去掉

并且，不能改变使用组件时的前缀名称

// app.use(ArcoVue, {
//   componentPrefix: "arco"
// });
// 改为
app.use(ArcoVue);

6、vite.config.ts中修改配置

在arco使用主题包中说过，全量引入和按需引入只能选一个

建议使用全量引入，如果使用全量引入，vite.config.ts中对arco的按需自动引入需要去掉：
● unplugin-auto-import/vite
● unplugin-vue-components/vite
● vitePluginForArco
下面是详细的配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ArcoResolver } from "unplugin-vue-components/resolvers";
import { vitePluginForArco } from "@arco-plugins/vite-vue";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // 省略其它配置......
  
  return {
    plugins: [
      vue(),
      // 关闭arco提供的Vite插件进行按需加载和组件库样式配置
      // vitePluginForArco({
      //   style: "css"
      // }),
      AutoImport({
        resolvers: [
          // 关闭按需引入arco样式
          // ArcoResolver()
        ],
      }),
      Components({
        resolvers: [
          // 关闭按需引入arco样式
          // ArcoResolver({
          //   sideEffect: true
          // })
        ]
      })
    ],
  };
});

7、配置完成

此时刷新页面，自定义主题包即可配置完成。

---

参考文档：
arco快速上手：https://arco.design/vue/docs/start
arco设计变量：https://arco.design/vue/docs/token
arco主题商店：https://arco.design/themes?currentPage=1&onlyPublished=false&...
arco-github使用designlab的主题包组件自定义的样式打包发布后会被默认的覆盖掉：https://github.com/arco-design/arco-design-pro-vue/issues/256