前端换肤功能如何实现

关于换肤

统一的颜色变量，css 变量或者 sass 变量或者 less 变量都可以
通过计算规则生成多种主题，对应上述变量，dark light default 等等
切换主题，加载对应的主题的文件到浏览器，生成变量，挂在到 root 上

如何从工程化角度完成上述三个过程

首先业务系统完全不关心换肤实现，只需要按照固定的一种变量模式（引用变量名需要统一）
再打包构建时分别提取对应的 css 文件和 js 文件
- css 文件，对应的是变量列表（多种，多套），提取过程主要是在于按需加载，ui 给的变量往往很多且重复的，通过文件提取被引用的，生成 css 变量文件
- js 文件实现建立换肤通信，以及去加载对应的 css。需要实现动态切换，以及动态创建 style
如何触发切换，方式：
- window 上挂在一个对应的方法，直接调用 window 的方法，切换病加载对应的 css 文件，创建 style，更改所有的变量对应关系，此时引用变量的值自然就更新了
- 在 js 中去监听某一个 token 或者 cookie 值，值代表的就是当前的主题名字，当值改变时，监听并且切换成对应的文件
- 基于 iframe，使用 postMessage 通信，切换对应的主题

如何提取变量

通过 loader 解析对应的 sass,css,less 等文件，或者是 vue 文件中的 style
匹配出对应的变量，最后对整个文件去重，则获取到了最终的使用变量

问题：

浏览器加载 css 会阻塞 js 进程吗？
加载资源的方式，静态资源和通过接口返回资源，在动态创建标签加载，两种方式有何差别和优缺点？
plugin 和 loader 有什么区别？分别是为了去实现一些什么功能？
webpack 中的 compiler

前端换肤功能如何实现相关推荐

【css】前端换肤功能方案调研 css变量换肤实践
场景:应用要做深浅两套主题,内嵌h5页面要根据用户当前选择的主题渲染对应的主题样式. 技术栈:vue-cli3 + less + Vant 接到需求后,上网调研了几种方案:切换className.切换 ...
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
-----前端换肤----
------前端换肤------ 1.前端的样式全局布局的情况下,通过定义全局变量统一底色,我是在app.vue中定义的色值: <style>body {--generalcolor: # ...
换肤功能原理及自定义组件化UI样式初步尝试
只从UI工作开始向前端工作,我一直计划着开发一套属于自己的UI框架,网站通过拖拽点击,或输入布局代码,后台自动生成一套静态页面,从此前端工作仅需要补充各种排版即可,静态页面通过代码生成. 可能我上面的 ...
Element UI主题换肤功能(基于vue-element-admin框架)
环境信息: 日期:2022-08-05 node版本:v14.15.4 "sass": "1.26.8", "sass-loader": & ...
动态更换主题色（换肤功能）
文章目录对于可供选择的颜色/主题样式换肤的实现一个全局class控制样式切换 JS改变href属性值切换样式表,例如 HTML 的 rel 属性下的 alternate 实现: 对于制定动态色值换 ...
在Ajax程序中实现无刷新换肤功能(asp.net2.0)
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术.特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性. 从文章的标题上看是Ajax的无刷新换肤,只是本 ...
[css] 如何实现换肤功能？
[css] 如何实现换肤功能? css 换肤常见方案是通过 less/sass/postcss 等css 预处理器,通过它们自身的变量用法,设置不同变量,生成不同的主题样式,但是这些样式都是会被打包 ...
android工程换背景图片,android换肤功能如何动态获取控件中背景图片的资源id?
这个是在在做一个换肤功能时遇到的问题. 对于换肤,网上都有示例,可以从别的皮肤安装包中读取所要的资源,前提是你必须先持有这个资源的引用名称,像R.drawable.background(喂,这不是废话 ...

前端换肤功能如何实现

关于换肤

如何从工程化角度完成上述三个过程

如何提取变量

问题：

前端换肤功能如何实现相关推荐

最新文章

热门文章