zoukankan      html  css  js  c++  java
  • 使用css自定义变量实现实现主题切换功能

    前言

    之前,写过一篇基于less自定义函数实现主题切换功能
    此种方法缺陷:

    • 从原本的项目中抽离样式比较繁琐;
    • 自定义函数传参方式,可读性比较差,容易造成传参混淆;
    • 因为主题自定义函数中定义的类是共用的,如果不同组件中类重名了,会影响到每个组件;需要在自定义函数中定义一个唯一命名的类,然后在需要使用该主题样式的地方进行引入;这无形中又增加了切换主题的复杂度;

    所以上篇文章最后提到的关于切换css变量的方式,个人觉得,还是简介明了。所以接下来就介绍一下 使用css自定义变量实现实现主题切换功能

    实现步骤

    1. 切换主题,为body添加不同类名

    <template>
      <div>
        <Select v-model="theme" @on-change="changeTheme">
          <Option v-for="item in themes" :value="item.value" :key="item.value">{{ item.name }}</Option>
        </Select>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          themes: [
            { name: '白色主题', value: 'theme-light' },
            { name: '黑色主题', value: 'theme-dark' },
          ],
          theme: '',
        };
      },
      methods: {
        changeTheme(theme) {
          window.localStorage.setItem('theme', theme);
          // 设置body类
          const body = document.querySelector('body');
          this.themes.forEach((t) => {
            body.classList.remove(t.value);
          });
          body.classList.add(theme);
        },
      },
      created() {
        // 初始化获取主题
        this.theme = window.localStorage.getItem('theme') || this.themes[0].value;
        // 设置body类
        const body = document.querySelector('body');
        body.classList.add(this.theme);
      },
    };
    </script>
    
    

    2. 针对不同类名,为css自定义变量赋值

    比如theme-light.less中

    .theme-light {
          --color: #fff;
    }
    

    theme-dark.less中

    .theme-dark {
          --color: #000;
    }
    

    3. 项目中引入保存主题变量的less文件

    @import "~@/styles/theme/theme-light.less";
    @import "~@/styles/theme/theme-dark.less";
    

    4. 使用css自定义变量

    .header{
         color: var(--color); 
    }
    

    综上,整体思路:切换主题时,为body赋值不同类,每个类下为css变量赋不同颜色值;

  • 相关阅读:
    github提交代码403
    针对七牛含有特殊字符的文件名,对特殊字符编码处理
    去除字符串所有空格
    按关键词匹配度排序
    服务器监控-Zabbix
    数据同步
    字符串-占位符
    Redis序列化
    Redis监听回调
    时间计算
  • 原文地址:https://www.cnblogs.com/XHappyness/p/13565476.html
Copyright © 2011-2022 走看看