前言:
web主题切换算是一个常规需求,我趁这公司有该需求的情况下,做一个整理,后续会给出各种具体实现方案/方式
解决方案
- (一)服务端渲染时加载不同的资源;
- (二)客户端动态加载不同的css资源;
- (三)客户端样式 根节点dom, class 名,动态切换;
- (四)客户端js 处理css 样式进行 style 重写;
- (五) css variable
(一)服务端渲染
编译多套css 主题,通过cookie 等的方式在服务端动态加载主题 css
优点:
- 相较于客户端动态切换,重新加载的方式,不会有冗余的css 代码;
- 不需要相关的主题 js 管理;
- 利于主题副作用的统一处理;(例如: canvas 组件的重绘)
缺点:
- 需要重新加载;过渡不平滑,用户体验不佳;
(二)客户端动态加载
客户端动态加载的方案,和服务端渲染的方案类似;需要生成多个主题相关的css文件;如有 主题副作用(canvas 重绘等)还需要有相关的多套js相关处理 );
用户切换主题时,进行动态的 css dom 加载/移除
优点:
- 过渡平滑,用户体验佳
缺点:
- 相较服务端渲染,需要加载不同的css 主题(同等大小的css 进行覆盖);
- 额外的js 进行相关的主题状态管理;
- 主题副作用,会增加组件的复杂性;
(三)客户端样式 根节点dom, class 名,动态切换
css 多主题全量保存;需要主题切换的时候,修改根dom 的class 名;来实现样式切换;
如下:
修改主题的时,只需要在 class =“app” dom 处,增加/移除 app-dark class 即可
html部分:
<body>
<div 
最低0.47元/天 解锁文章
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
