Nuxt configuration topic switching

Ideas

• By giving body Add methods with different class names , To switch .
• Colors corresponding to each theme , Configured in a less In file
• less Define a method in the file , This method can generate all styles circularly
• Style part of each component , Use this method to generate styles for all themes

1. introduce less, modify package.json

"devDependencies": {
    ...
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    ...
  }

2. stay ass/css/ Add under directory theme.less file

@themes: theme-green, theme-red;
@theme-green-mc: #4AD991;
@theme-red-mc: red;

.setTheme() {
  .loop(@i) when (@i < length(@themes)+1){
    @theme: extract(@themes, @i);
    @mc: '@{theme}-mc';
    [email protected]{theme}{
      .theme(@@mc);
    }
    .loop(@i+1);
  }
  .loop(1);
}

3. The code of the style part of the component is as follows