如何动态修改主题颜色

Question

vue3+vite+ant-design-vue 如何动态修改主题颜色？试了好多都不起作用

Answer 1

• 这篇博客: ant-design-vue+vite主题切换详细步骤（简单案例）中的 3、动态切换主题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 这里我使用一个vite插件：vite-plugin-theme-preprocessor

  一个vite v2.0+插件，用于实现多个 less、sass 变量文件编译出多主题的 css，使得基于less、sass以及css modules的主题样式在线动态切换变得很简单。

  原帖地址：传送门

  根据仓库中的说明，我们需要先安装插件：

  yarn add @zougt/vite-plugin-theme-preprocessor -D
  
  yarn add path --save
  

  注意 path是用来解析路径的，这在我们项目中很多地方都会用得到，同样。这里也需要。

  然后我们需要在vite.config.ts中使用这个插件。

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  import path from 'path'
  
  import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor";
  
  export default defineConfig({
    plugins: [
      vue(),
      themePreprocessorPlugin({
        less: {
          // 各个主题文件的位置
          multipleScopeVars: [
            {
              scopeName: "theme-default",
              path: path.resolve("src/theme/default.less"),
            },
            {
              scopeName: "theme-green",
              path: path.resolve("src/theme/green.less"),
            },
          ],
        },
      }),
    ],
    // 开启less支持
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true
        }
      }
    }
  })
  
  

  上面，我们定义了两个主题分别是：theme-default与 theme-green以及对应得主题文件得位置。

  我们切换主题就靠主题文件了。

  接下来我们需要创建这两个主题文件，并分别引入ant的样式文件，注意是less格式。

  @import "ant-design-vue/lib/style/themes/default.less";
  // defalut.less
  // 上面引入了核心样式文件，我们可以对其进行修改，覆盖原来的达到我们的目的。
  // 这里不仅能修改变量还能修改样式
  
  // 比如我修改以下
  
  // 全局主色 黄色
  @primary-color: #ffa618; 
  
  // 链接色 青色
  @link-color: #18ffb2; 
  

  @import "ant-design-vue/lib/style/themes/default.less";
  
  // green.less
  
  // 全局主色 绿色
  @primary-color: #1cce42; 
  
  // 链接色 粉红色
  @link-color: #c76f98;
  

  注意：ant-design-vue/lib/style/themes/default.less这个路径是没有问题的，如果报错了，请检查你有没有安装easy less这个插件，有的话，禁用掉！

  然后，我们就可以进行主题切换的逻辑了！

  我们逻辑比较简单，我使用一个开关，打开是绿色，关闭是黄色。

  在App.vue中

  <template>
    <a-button type="primary">Primary Button</a-button>
    <a-button>Default Button</a-button>
    <a-button type="dashed">Dashed Button</a-button>
    <a-button type="text">Text Button</a-button>
    <a-button type="link">Link Button</a-button>
  
    <!-- 开关切换主题 -->
    <a-switch
      v-model:checked="checked"
      checked-children="绿"
      un-checked-children="黄"
      @change="change"
    />
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from "vue";
  
  import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils.js";
  
  export default defineComponent({
    setup() {
      const checked = ref<boolean>(false);
  
      // 切换主题回调
      const change = (value: boolean) => {
        // 如果开关打开，就切换为绿色主题，否则默认黄色主题
        if (value) {
          toggleTheme({
            scopeName: "theme-green",
          });
          console.log("已切换为绿色主题");
        } else {
          toggleTheme({
            scopeName: "theme-default",
          });
          console.log("已切换为默认主题");
        }
      };
      return {
        checked,
        change,
      };
    },
  });
  </script>
  
  

  注意：如果你引入插件的时候报错了，但其实这并不是错，你需要关闭ts的严格检查模式。也就是在tsconfig.json中"strict": false,
  然后注意，这时候切换主题发现是无效的。

  还记得你在vite.config.ts中自定义的主题吗，将其删掉或注释掉，因为它的优先级比较高。

   css: {
    preprocessorOptions: {
      less: {
        // modifyVars: {
        //   'primary-color': '#1DA57A',
        //   'link-color': '#1DA57A',
        //   'border-radius-base': '2px',
        // },
        javascriptEnabled: true
      }
    }
  }
  

  这时候，我们片头的效果就出来了。