vue主题换肤功能

定义一个theme.css,两个类名，一个是默认的body和一个night

在需要变化的div的class里面添加对应的类名，例如class='c-t0F0F0F'

body {
  --t0F0F0F: #0f0f0f;
  --t999999: #999999;
  --tFFFFFF: #ffffff;
  --t24B37A: #24b37a;
  --tC7CDCD: #c7cdcd;
  --t666666: #666666;
  --bg24B37A: #24b37a;
  --bgDCDCDC: #dcdcdc;
  --bg242629: #242629;
  --bgFFFFFF: #ffffff;
  --bgF5FAFA: #f5fafa;
  --bdE7E7E7:#E7E7E7;
}

.night {
  --t0F0F0F: #cccccc;
  --t999999: #999999;
  --tFFFFFF: #ffffff;
  --t24B37A: #24b37a;
  --tC7CDCD: #c7cdcd;
  --t666666: #666666;
  --bg24B37A: #24b37a;
  --bgDCDCDC: #dcdcdc;
  --bg242629: #242629;
  --bgFFFFFF: #232623;
  --bgF5FAFA: #232623;
  --bdE7E7E7:#232623;
}

.c-t0F0F0F {
  color: var(--t0F0F0F);
}
.c-t999999 {
  color: var(--t999999);
}

将其存入vueX里面，在app.vue里面监听其主题的变化然后切换

changTheme(tradeTheme: string) {
    if (tradeTheme != "white") {
      document.body.setAttribute("class", "night");
    } else {
      document.body.setAttribute("class", "");
    }
  }