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变量赋不同颜色值;

  • 相关阅读:
    Python 安装Twisted 提示python version 2.7 required,which was not found in the registry
    Openfire Strophe开发中文乱码问题
    css div 垂直居中
    How to create custom methods for use in spring security expression language annotations
    How to check “hasRole” in Java Code with Spring Security?
    Android 显示/隐藏 应用图标
    Android 当媒体变更后,通知其他应用重新扫描
    文件上传那些事儿
    专题:点滴Javascript
    主流动画实现方式总结
  • 原文地址:https://www.cnblogs.com/XHappyness/p/13565476.html
Copyright © 2011-2022 走看看