换肤问题有没有解决方案

[ayizhi]

现在皮肤主题设置是用element-variables ＋ babelrc打包
那么如果我们需要有换肤换主题功能，一般实现方式是动态改css样式link路径
但对于elementui该如何解决

[QingWei-Li]

虽然和你问题无关，但是我还是想放一下这个链接
https://elementui.github.io/theme-preview/#/zh-CN

[ayizhi]

牛逼牛逼，贵司真棒，可不可以讲讲如何实现？有没有github example？

大概思路是不是 通过element－theme打包好，然后替换link引入？

但是我看到替换主题后发送的请求是.woff .tff

这个可不可以讲讲？

[Leopoldthecoder]

项目仓库在这：https://github.com/ElementUI/theme-preview
实现其实很暴力：

1. 先把默认主题文件中涉及到颜色的 CSS 值替换成关键词：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274
2. 根据用户选择的主题色生成一系列对应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/formula.json
3. 把关键词再换回刚刚生成的相应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/color.js
4. 直接在页面上加 style 标签，把生成的样式填进去：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L198-L211

[ayizhi]

棒！

[lss5270]

这个有点复杂，如果我只是下载四种主题方案，然后供用户自由选择，这样的话 该如何实现呢？

[Arlene-L]

你这个换肤的功能实现了么 @lss5270

[lss5270]

早就实现了，嘿嘿

[Arlene-L]

@lss5270 我看到了，感谢！

[lss5270]

喜欢的话，给个star

[haogjin]

换肤可能实现，但存在兼容性问题，只能兼容谷歌和火狐，请问有什么解决思路？

[lan0909]

@Leopoldthecoder 按照步骤可以实现谷歌、火狐、360和QQ浏览器极速模式下换肤，但是IE浏览器是不支持换肤操作的https://elementui.github.io/theme-preview/#/zh-CN
，这个链接也无法打开。请问您知道原因么？或者指点一下有什么基于Element UI 换肤的兼容性好的解决方法？

[Leopoldthecoder]

@lan0909 可以参考下 @lss5270 的方案：https://github.com/lss5270/vue-admin-spa/blob/0602ef04b9dfa7829727f6f6bb1230f0dc6b676c/src/global/global.js#L26-L49

[lss5270]

https://github.com/lss5270/vue-admin-spa 如果只需要几套换肤方案，大家可以参考我的做法~~ 另外大家喜欢的 可以给个star 谢谢

[lan0909]

@Leopoldthecoder 谢谢您！ @lss5270 请问有步骤或注意事项么？其实我下载了项目，install了很久都成功。

[lss5270]

@lan0909 下载了很久没成功？ 里面有个node压缩包 下载时 可能稍微慢一点

[lan0909]

@lss5270 可以了，谢谢啦

[lhajh]

@Leopoldthecoder 使用 https://elementui.github.io/theme-preview/#/zh-CN 下载好主题并使用 link 引入 index.css (大致看了一下代码，index.css 应该是把其余那些 css 文件都集合到一起了) 后，有些弹框背景颜色仍然是白色的，无法随主题色变化，比如日期弹框等，这个怎么办？

[Yan2603]

刚好最近有这个需求，受用

[zinwalin]

项目仓库在这：https://github.com/ElementUI/theme-preview
实现其实很暴力：

1. 先把默认主题文件中涉及到颜色的 CSS 值替换成关键词：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274
2. 根据用户选择的主题色生成一系列对应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/formula.json
3. 把关键词再换回刚刚生成的相应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/color.js
4. 直接在页面上加 style 标签，把生成的样式填进去：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L198-L211

many thanks.

[Corgis]

虽然和你问题无关，但是我还是想放一下这个链接
https://elementui.github.io/theme-preview/#/zh-CN

你好 请问这个有源码么 实现思路大致是什么 方便告知一下么

[ghost]

@Leopoldthecoder 使用 https://elementui.github.io/theme-preview/#/zh-CN 下载好主题并使用 link 引入 index.css (大致看了一下代码，index.css 应该是把其余那些 css 文件都集合到一起了) 后，有些弹框背景颜色仍然是白色的，无法随主题色变化，比如日期弹框等，这个怎么办？

在element-ui的源码中找到相应的组件，例如，想修改el-select的背景色，可以找到文件/packages/theme-chalk/src/select-dropdown.scss，可以发现背景色是这样设置的：background-color: $--select-dropdown-background;，那么在你的项目中element-variables.scss中对这个变量$--select-dropdown-background重新赋值就可以了，具体自定义主题的方式可以参考官方文档

[wmyxyz]

项目怎么启动

[brosegu]

@Leopoldthecoder 按照步骤可以实现谷歌、火狐、360和QQ浏览器极速模式下换肤，但是IE浏览器是不支持换肤操作的https://elementui.github.io/theme-preview/#/zh-CN
，这个链接也无法打开。请问您知道原因么？或者指点一下有什么基于Element UI 换肤的兼容性好的解决方法？

https://element.eleme.cn/#/zh-CN/theme/preview