胖虎教你在Vue项目中用scss变量 灵活切换主题色

前言

很多情况下，我们的产品需要进行主题色切换，比如针对不同客户的定制化方案。 目前很多UI框架提供主题色切换，类似antd element，不过这些都是需要手动修改，再打包，而且如果定制化成都高，色彩渗透到项目中任何一个角落，这种切换也是不理想的。那么，如果实现灵活切换呢？ 话不多说，我们直接操作，以Vue为例子

实现

1. 首先需要你在你的项目中安装scss以及scss-loader

    npm i sass-loader node-sass -d
   

2. 项目的src中新建styles文件夹，文件夹下新建varible.scss 这个文件里面是你的自定义变量，比如

     $bg-color-theme: #2C43AE; // 默认背景色
     $bg-color-theme1: #edc148; // 切换的背景色
     $bg-color-theme2: #652BF5;
     ...
   

3. 使用mixin, styles文件夹下新建mixin.scss文件，在此文件中写入自定义mixin函数

    @charset 'utf-8';
    @import './varible.scss';
    
    @mixin bg_color($color) {
        background-color: $color !important;
        [data-theme="theme1"] & {
            background-color: $bg-color-theme1 !important;
        }
        [data-theme="theme2"] & {
            background-color: $bg-color-theme2 !important;
        }
    }
   

4. 在需要使用的文件中引入 在样式中使用@include 使用色值

   @import '../../styles/mixin.scss';
   
   .el-menu {
        @include bg_color($bg-color-theme);
   }
   

5. 在切换主题色事件中 使用方法修改文档的data-theme属性

   // 改变主题色
   changeTheme(theme) {
       localStorage.setItem('data-theme', theme)
       window.document.documentElement.setAttribute('data-theme', theme)
   },
   

完结

简单的操作带来不简单的效果，宝宝们，继续努力吧