vue切换主题色

vue+scss切换主题色

1.创建global.scss样式文件，在app.vue 引入

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

2.dark.scss和light.scss为两个主题色样式配置变量文件，在global.scss中引入。两个文件定义样式变量，分别引用theme.scss,用于定义类名使用样式

//globals.scss
@import "./theme/light.scss";
@import "./theme/dark.scss";

//dark.scss
$theme-name: 'dark';  
$theme-background: #666;
$theme-text-color: pink;
@import './theme.scss'; 

//light.scss
$theme-name: 'light';
$theme-background: #FFF;
// text
$theme-text-color: red;
@import './theme.scss';

3.themes.scss

//引用dark.scss和light.scss两个文件变量
body.theme-#{$theme-name}{
    background-color: $theme-background;
    .text-color{
        color: $theme-text-color;
    }
}

4.修改body.className名字和themes.scss的类名做匹配

function themeEvent(){
      if(data.theme=="light"){
        data.theme="dark"
        document.body.className = `theme-dark`  //设置body的类名为theme-dark，使用dark文件中的样式
      }else{
        data.theme="light"
        document.body.className = `theme-light`
      }
    }

5.使用themes.scss中的样式