背景 机票 H5 基于 VUE 进行开发，是一个成熟的、多人协作的 webapp，承接了大量第三方渠道。 不同的渠道有不同的需求，比如有个别渠道需要更换样式/图标，以符合他们的视觉规范。虽然我们对色值做了全局的配置，但由于各种原因，还是有部分色值被硬编码到代码中了，图标也分散在各个文件中 ...

此功能仅是告知方法，写的过于粗糙，关键在于第三、四、五步，具体的哪些元素的主题需要变更，根据你的项目而定，例如nav背景色、图标颜色、button背景色等元素， 具体的样式自己完成即可，样式最好使用变量的形式，为了直观，我就直接更改的，建议使用css变量的形式，事先定义好各个主题的色值，直接 ...

起因 最近因公司需求，需要实现主题换肤功能，不仅仅是颜色的更改，还需要包括图片，字体等文件等更换，因此在百度里各种实现方案后，决定根据scss+style-loader/useable做换肤。 项目开始 首先我们用vue-element-admin这个开源的后台管理系统项目来做demo演示 ...

演示地址: https://elementui.github.io/theme-chalk-preview/#/zh-CN 原理: element ui 2.0版本之后是基于scss实现的,所有到颜色都是通过变量进行定义,所以我们可以通过修改变量来达到动态换肤的目的. 代码 ...

　　项目中期的时候，大佬对项目的色彩不满意，要求更换，这样产品就提出了需求，要求可以根据用户自己的需求去自己切换主题色；这边根据产品提供的几种颜色，看了下网上的博客，一开始我以为可以只引入一个css文件，然后像js一样提出一个变量改变这个变量就可以的，但是看到后期，发现css文件还是要准备多个 ...

转至 https://www.cnblogs.com/dengqichang/p/10364455.html 四、封装动态换肤色ThemePicker.vue组件。 五、直接在组件中引用 六、换肤效果测试。 ...

有如下代码要实现换肤功能 这里通过一个下拉框应用不用主题 首先我们把主题变量抽取出来 这里包含三个主题red,gredd,blue,每个主题内的font-color变量对应不同的值， 然后我们写一个主题化的mixin,包括一个themed函数 ...

一：先写好两个css样式放在static文件夹中 二：在index.html中添加css link链接 三：在App.vue中的 created中添加默认执行方法 四：最后在需要的页面写上切换主题功能 ...