实现网站颜色主题切换方案

1.html上面挂载属性data-theme

切换主题事件：

  toggleTheme(dark: boolean) {
   if (dark) {
    this.theme = 'dark';
    window.document.documentElement.setAttribute('data-theme', 'dark');
   } else {
    this.theme = 'light';
    window.document.documentElement.setAttribute('data-theme', 'light');
   }
  },

 2.处理样式 less

global.css 样式在main.js 导入

import '@/assets/style/global.less';

global.css文件-导入主题文件：

@import url("./theme-light.less");
@import url("./theme-dark.less");

主题文件 theme-dark.less：

 

[data-theme=dark] {
  在此处写主题样式

}