1.要实现系统的一键换肤功能,首先要将颜色作为变量提取出来,并为两种主题配置颜色
variables.scss
//浅色主题
$light-theme: (
base-color: #000,
background-color: #ccc
);
//深色主题
$dark-theme: (
base-color: #fff,
background-color: #000
);
//定义映射集合
$themes: (
light-theme: $light-theme,
dark-theme: $dark-theme
);
//字体颜色
@mixin base-color() {
@each $theme-name, $theme in $themes {
[data-theme = '#{$theme-name}'] & {
color: map-get($map: $theme, $key: base-color);
}
}
}
//背景色
@mixin base-background() {
@each $theme-name, $theme in $themes {
[data-theme = '#{$theme-name}'] & {
background: map-get($map: $theme, $key: background-color);
}
}
}
$font-size: 14px;
2.在 App.vue 中定义名为 “data-theme” 的变量,可设置此变量来配置主题颜色
<template>
<!--浅色-->
<router-view data-theme="light-theme"/>
<!--深色-->
<!--<router-view data-theme="dark-theme"/>-->
</template>
3.页面中的样式引入 variables 中定义好的变量,就可以自动按照当前主题切换样式了
<style lang="scss" scoped>
@import "../styles/variables.scss";
.main{
height: 100%;
@include base-color();
@include base-background();
font-size: $font-size;
}
</style>