原理:
通过设置html的attribute属性在封装的函数中进行判断，进行相应的设置不同的颜色
css中 [ ] 可以识别到在html标签上设置的属性，所以在html上对应属性发生变化时，就会执行相应的样式，
这一步有点类似于平时给div添加一个.active属性，css自动执行相应样式。
1.首先切换的样式文件我们需要两个
varibale.scss： 颜色，字体，背景的配置文件
mixin.scss： 定义mixin方法的文件。
下面贴出代码:
varibale.scss
// 颜色，字体，背景的配置文件 //颜色定义规范 $background-color-theme: #3f8e4d;//背景主题颜色默认 $background-color-theme1: red;//背景主题颜色1 $background-color-theme2: #652BF5;//背景主题颜色2 $background-color-theme3: deepskyblue;//背景主题颜色3 $background-color-themesec: #edc148;//背景次要主题颜色 $font-color-theme : #3f8e4d;//字体主题颜色默认 $font-color-theme1 : red;//字体主题颜色1 $font-color-theme2 : #652BF5;//字体主题颜色2 $font-color-theme3 : deepskyblue;//字体主题颜色3 $font-color-themesec : #edc148;//字体次要主题颜色 $font-color-shallow0 : #000; $font-color-shallow1 : #111; $font-color-shallow2 : #222; $font-color-shallow3 : #333; $font-color-shallow4 : #444; $font-color-shallow5 : #555; $font-color-shallow6 : #666; $font-color-shallow7 : #777; $font-color-shallow8 : #888; $font-color-shallow9 : #999; $font-color-shallowdb : #dbdbdb; $background-image:url("~@/assets/images/001.png"); $background-image-theme1:url("~@/assets/images/002.png"); $background-image-theme2:url("~@/assets/images/003.png"); //字体定义规范 $font_little_s:10px; $font_little:12px; $font_medium_s:14px; $font_medium:16px; $font_large_s:18px; $font_large:20px;mixin.scss
// 定义mixin方法的文件。 @charset "utf-8"; @import "./varibale.scss";/*引入配置*/ @mixin font_size($size){/*通过该函数设置字体大小，后期方便统一管理；*/ @include font-dpr($size); } @mixin font_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/ color:$color; [data-theme="theme1"] & { color:$font-color-theme1; } [data-theme="theme2"] & { color:$font-color-theme2; } [data-theme="theme3"] & { color:$font-color-theme3; } } @mixin bg_color($color){/*通过该函数设置主题颜色，后期方便统一管理；*/ background-color:$color; [data-theme="theme1"] & { background-color:$background-color-theme1; } [data-theme="theme2"] & { background-color:$background-color-theme2; } [data-theme="theme3"] & { background-color:$background-color-theme3; } } @mixin bg_img($img){/*通过该函数设置主题颜色，后期方便统一管理；*/ background-image:$background-image; [data-theme="theme1"] & { background-image:$background-image-theme1; } [data-theme="theme2"] & { background-image:$background-image-theme2; } } /*px转rem*/ @mixin px2rem($property,$px,$px2:false,$px3:false,$px4:false){ $rem:75px;/* 设计稿尺寸/10 */ @if $px and $px2 and $px3 and $px4 { #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem ($px3 / $rem) + rem ($px4 / $rem) + rem; } @else if $px and $px2 { #{$property}: ($px / $rem) + rem ($px2 / $rem) + rem; //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem ($px2 * 1.4 / $rem) + rem;} } @else{ #{$property}: ($px / $rem) + rem!important; //[data-model='pad'] & {#{$property}: ($px * 1.4 / $rem) + rem;} } } /*根据dpr计算font-size*/ @mixin font-dpr($font-size){ font-size: $font-size; //[data-model="pad"] & { font-size: $font-size * 1.4; } [data-dpr="2"] & { font-size: $font-size * 2;} [data-dpr="3"] & { font-size: $font-size * 3;} } /*超行溢出显示省略号*/ @mixin overflow($num:1,$fontSize:0,$lineHeight:1.5){ display: -webkit-box;-webkit-line-clamp:$num; overflow: hidden; /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ @if $fontSize!=0 and $lineHeight{/*高度需要撑开*/ line-height:$lineHeight; @if $lineHeight < 1.2 { line-height:1.2; /*最小需要1.2，否则在部分安卓机下第$num+1行会顶部漏出*/ } height: $num * $fontSize * $lineHeight; [data-dpr="2"] & { height: $num * $fontSize * $lineHeight * 2!important;} [data-dpr="3"] & { height: $num * $fontSize * $lineHeight * 3!important;} } }用法:
vue组件
<template> <div id="bookcaselist"> <div id="content"> <p @click="changeTheme('theme1')"></p> <p @click="changeTheme('theme2')"></p> <p @click="changeTheme('theme3')"></p> </div> <div class="aaaa"> </div> <div class="aaaa1"> </div> <span> aaaa </span> </div> </template> <script> export default { name: 'mine', data () { return { } }, methods: { changeTheme (theme) { localStorage.setItem('data-theme',theme) window.document.documentElement.setAttribute('data-theme', theme) } }, components: { } } </script> <style scoped="" lang="scss"> @import "@/assets/styles/testfile/mixin.scss"; #content{ overflow: hidden; } p{ @include px2rem(width,100px); @include px2rem(height,100px); @include px2rem(margin,20px); float:left; } .aaaa{ @include px2rem(width,200px); @include px2rem(height,200px); @include px2rem(margin,20px); @include bg_color($background-color-theme); } .aaaa1{ @include px2rem(width,200px); @include px2rem(height,200px); @include px2rem(margin,20px); @include bg_img($background-image); } span{ @include font_color($font-color-theme); } p:first-child{ background-color:red; } p:nth-child(2){ background-color:#652BF5; } p:last-child{ background-color:deepskyblue; } </style>这里为了保证刷新时修改的样式存在，在这里使用了localStorage存储
所以需要每次在加载时重新设置:main.js 添加设置
window.document.documentElement.setAttribute('data-theme', localStorage.getItem('data-theme')?localStorage.getItem('data-theme'):'')
