Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

换肤问题有没有解决方案 #3054

Closed
ayizhi opened this Issue Feb 25, 2017 · 19 comments

Comments

Projects
None yet
10 participants
@ayizhi
Copy link

ayizhi commented Feb 25, 2017

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

@QingWei-Li

This comment has been minimized.

Copy link
Member

QingWei-Li commented Feb 25, 2017

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

@ayizhi

This comment has been minimized.

Copy link
Author

ayizhi commented Feb 25, 2017

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

大概思路是不是 通过element-theme打包好,然后替换link引入?

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

这个可不可以讲讲?

@Leopoldthecoder

This comment has been minimized.

Copy link
Member

Leopoldthecoder commented Feb 26, 2017

项目仓库在这: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

This comment has been minimized.

Copy link
Author

ayizhi commented Feb 27, 2017

棒!

@lss5270

This comment has been minimized.

Copy link

lss5270 commented May 17, 2017

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

@Arlene-L

This comment has been minimized.

Copy link

Arlene-L commented Aug 24, 2017

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

@lss5270

This comment has been minimized.

Copy link

lss5270 commented Aug 24, 2017

早就实现了,嘿嘿

@Arlene-L

This comment has been minimized.

Copy link

Arlene-L commented Aug 24, 2017

@lss5270 我看到了,感谢!

@lss5270

This comment has been minimized.

Copy link

lss5270 commented Aug 24, 2017

喜欢的话,给个star

@haogjin

This comment has been minimized.

Copy link

haogjin commented Mar 19, 2018

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

@lan0909

This comment has been minimized.

Copy link

lan0909 commented Mar 20, 2018

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

@lss5270

This comment has been minimized.

Copy link

lss5270 commented Mar 20, 2018

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

@lan0909

This comment has been minimized.

Copy link

lan0909 commented Mar 20, 2018

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

@lss5270

This comment has been minimized.

Copy link

lss5270 commented Mar 20, 2018

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

@lan0909

This comment has been minimized.

Copy link

lan0909 commented Mar 20, 2018

@lss5270 可以了,谢谢啦

@lhajh

This comment has been minimized.

Copy link

lhajh commented Mar 29, 2018

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

@zikuai

This comment has been minimized.

Copy link

zikuai commented Dec 3, 2018

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

@zinwalin

This comment has been minimized.

Copy link

zinwalin commented Feb 28, 2019

项目仓库在这: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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.