如何进行纯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()是什么意思呢?这个函数用于插入自定义的属性值,如果这个属性值在很多地方被使用。这说的不就是我们切换主题色的需求吗?用他就对了!!!

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

相关文章:

  • 2021-11-02
  • 2021-12-06
  • 2021-12-27
  • 2021-08-21
  • 2021-09-13
  • 2021-11-15
  • 2021-12-29
  • 2021-05-19
猜你喜欢
  • 2021-04-03
  • 2021-10-26
  • 2021-08-19
  • 2021-12-31
  • 2022-12-23
  • 2022-12-23
  • 2022-01-12
相关资源
相似解决方案