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 · 23 comments
Closed

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

ayizhi opened this issue Feb 25, 2017 · 23 comments

Comments

@ayizhi
Copy link

ayizhi commented Feb 25, 2017

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

@QingWei-Li
Copy link
Contributor

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

@ayizhi
Copy link
Author

ayizhi commented Feb 25, 2017

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

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

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

这个可不可以讲讲?

@Leopoldthecoder
Copy link
Contributor

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

ayizhi commented Feb 27, 2017

棒!

@lss5270
Copy link

lss5270 commented May 17, 2017

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

@Arlene-L
Copy link

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

@lss5270
Copy link

lss5270 commented Aug 24, 2017

早就实现了,嘿嘿

@Arlene-L
Copy link

@lss5270 我看到了,感谢!

@lss5270
Copy link

lss5270 commented Aug 24, 2017

喜欢的话,给个star

@haogjin
Copy link

haogjin commented Mar 19, 2018

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

@lan0909
Copy link

lan0909 commented Mar 20, 2018

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

@Leopoldthecoder
Copy link
Contributor

@lss5270
Copy link

lss5270 commented Mar 20, 2018

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

@lan0909
Copy link

lan0909 commented Mar 20, 2018

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

@lss5270
Copy link

lss5270 commented Mar 20, 2018

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

@lan0909
Copy link

lan0909 commented Mar 20, 2018

@lss5270 可以了,谢谢啦

@lhajh
Copy link

lhajh commented Mar 29, 2018

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

@Yan2603
Copy link

Yan2603 commented Dec 3, 2018

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

@zinwalin
Copy link

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

Corgis commented Sep 29, 2019

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

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

@ghost
Copy link

ghost commented Feb 10, 2020

@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
Copy link

wmyxyz commented Jun 19, 2020

项目怎么启动

@brosegu
Copy link

brosegu commented Aug 28, 2020

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests