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中的样式
