如何进行纯css控制切换主题色或一键更换背景色

        在项目开发中可能会遇到切换主题色或者换肤的需求，其实有很多的解决方法，现在很多项目css都会使用预处理语言，那么可以利用less，scss或stylus进行预处理。然而前提是你的项目刚好是用less，scss或stylus，而且每种方法的处理方法都不一样，可能你接手别人项目进行维护修改，用的恰好不是你熟悉的预处理语言，那有没有通用的方法呢？有的，那就是直接用css来处理，不管你是哪种预处理语言都适用。看看效果先：

                                                                 

 

下面说的是vue+less项目中利用纯css控制方法：

        1.在你项目的common样式表里（应该有通用样式表吧？要不reset样式表？）写一句话：

         body { --themeColor: #0ff; } 

         这句话的作用是设置你的默认主题色。--themeColor是自定义的名字，大家随意。

        2.js调用setProperty进行颜色值的控制，我觉得核心就是这句话：

        document.body.style.setProperty('--themeColor', this.$store.state.home.themeColor)

        因为项目中在系统设置有个需求是用颜色选择器选择颜色点击确定后立刻更改主题色，所以我将颜色值改变写在了vuex中，通过dispatch进行更改颜色。这个大家可以根据自己的实际需求来做，有的可能就是指定几个颜色值进行切换，那就不需要像我这样用vuex来操作。

        3.既然js已经控制了，那我们还需要在css中表达，在组件的style中需要控制的标签进行变化：
        .confirm {

            line-height: 40px;

            background-color: var(--themeColor);

        }

        精华在于var()，这个var()是什么意思呢？这个函数用于插入自定义的属性值，如果这个属性值在很多地方被使用。这说的不就是我们切换主题色的需求吗？用他就对了！！！

        写到这里，需求就被完成了，亲测有效哦。

 

 

  如需转载请注明出处：https://www.cnblogs.com/zishang91/p/12218172.html，以便有错误可以及时修改，若有错漏不足之处，请见谅并且指点，谢谢！！！