更换主题

    element-ui 的通用样式变量可能无法满足所有定制需求，你可以通过覆盖默认的组件样式的方式实现。 由于 element-ui 的样式我们是在全局引入的，所以你想在某个里面覆盖它的样式就不能加 scoped，但你又想只覆盖这个页面的 element 样式，你就可在它的父级加一个 class，以用命名空间来解决问题。或者使用。

    一些全局的 element-ui 样式修改可以在 @/styles/element-ui.scss更换主题 - 图1 中进行设置。

    动态换肤

    本项目提供了两种动态换肤的功能，各有利弊，请结合个人需求自行选择。

    element-ui 升级为 2.0 之后官方文档的右上角提供了动态换肤的功能，本项目也提供了该功能。 代码地址：。

    简单说明一下它的原理： element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的，所有的颜色都是基于几个基础颜色变量更换主题 - 图2来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。 首先我们需要拿到通过 package.json 拿到 element-ui 的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态添加 style 标签来覆盖原有的 css 样式。

    这里需要获取 element-ui 的版本号，从而锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。

    1. const version = require('element-ui/package.json').version
    3. const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
    5. getCSSString(url, callback, variable) {
    6.   const xhr = new XMLHttpRequest()
    7.   xhr.onreadystatechange = () => {
    9.       this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
    10.       callback()
    11.     }
    12.   xhr.open('GET', url)
    13.   xhr.send()
    14. }

    使用方式

    在项目中引入 ThemePicker 组件即可

    • 优点
      • 无需准备多套主题，可以自由动态换肤
    • 缺点
      • 自定义不够，只支持基础颜色的切换

    多套主题换肤

    本方法就是最常见的换肤方式，本地存放多套主题，两者有不同的命名空间，如写两套主题，一套叫 day-theme ，一套叫 night-theme ，night-theme 主题都在一个 的命名空间下，我们动态的在 body 上 add .night-theme ; remove .night-theme。

    使用

    1. git@github.com:PanJiaChen/custom-element-theme.git

    之后全局安装主题生成工具

    进入项目目录 安装相关依赖

      首先执行 et -i 生成 element-variables.scss 存放样式变量的文件，然后进入 element-variables.scss 文件 修改你自己需要的变量，修改完成之后执行 et ， 编译主题，最后执行gulp 生成命名空间。所有生成文件在 dist 目录下，你只需复制文件下所有内容到 项目中 src/assets/custom-theme 进行覆盖替换就行

      TIP

      如果需要修改打包生成样式命名空间的名字 只要修改该即可

      更多动态换肤文章更换主题 - 图3