Theme switch under Vue use less and And-Design-Vue

Question

I am trying to implement theme switching between three themes. Dark, Light and a 3rd theme. My idea is to define 3 variable.less files, one for each theme. In the file, I re-define antd colors. reset.less will import variable.less to reset colors defined in antd.less. Like the code below:

// dark theme
.dark {
  @import '~ant-design-vue/dist/antd.less';
  @import "styles/asia-info/themes/dark-theme/reset.less";
  @import "styles/asia-info/themes/dark-theme/components.less";
  @import (css) "../common.css";
}

// Light theme
.light {
  @import "~ant-design-vue/dist/antd.less";
  @import "styles/asia-info/themes/light-theme/reset.less";
  @import "styles/asia-info/themes/light-theme/components.less";
  @import (css) "../common.css";
}

//3rd theme
.china-mobile {
  @import '~ant-design-vue/dist/antd.less';
  @import "styles/china-mobile/reset.less";
  @import "styles/china-mobile/components.less";
  @import (css) "../common.css";
}

But the above code does not work. I think the problem is you cannot import same antd.less file in less. I tried to add (multiple) keyword when import the same file, but it takes forever for vue-cli to compile. So now what I am doing is:

// dark theme
.dark {
  @import '~ant-design-vue/dist/antd.less';
  @import "styles/asia-info/themes/dark-theme/reset.less";
  @import "styles/asia-info/themes/dark-theme/components.less";
  @import (css) "../common.css";
}

// light theme (import and.less and common.css in main.js in Vue)
@import "styles/asia-info/themes/light-theme/reset.less";
@import "styles/asia-info/themes/light-theme/components.less";

// 3rd theme
.china-mobile {
  @import '~ant-design-vue/dist/antd.less';
  @import "styles/china-mobile/reset.less";
  @import "styles/china-mobile/components.less";
  @import (css) "../common.css";
}

If I only have dark and light theme, I import antd.less in main.js for the light theme, and import antd.less 2nd time inside .dark for the dark theme. It seems to work. But when I add the 3rd theme, since same antd.less imported again, when I switch to the 3rd theme, colors does not change.

Right now, the solution I can see is to reset colors for each antd classes in the 3rd theme. But this is really troublesome, there are so many classes I have to reset. Wondering if there is a better solution?

Theme switch under Vue use less and And-Design-Vue

0 Answers0