而且我还希望能有灰度模式和暗黑模式,皮肤概念孕育而生

大厂的做法

vant

ant-design

zarm

考察下来,zarm 最符合我的预期

按 zarm 的来

简单来说,使用 context 来做主题色,因为 context 能传递到任意组件,接下来就看怎么写

皮肤解决方案

https://segmentfault.com/a/1190000041195585?_ea=195391016

CSS 变量

1
2
3
4
5
6
7
:root {
--bg-color: brown; // 定义颜色变量
}
.btn {
// 直接使用颜色预定义的颜色变量
background-color: var(--bg-color);
}

https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

https://zhuanlan.zhihu.com/p/494460951

https://mp.weixin.qq.com/s/6bmqki5IPDlD4H7a7C1HXw

张鑫旭的换肤方案

https://www.bilibili.com/video/BV1kU4y1X7a8?vd_source=55c655c3b4aed7bb7a250da7eea13eb8

https://juejin.cn/post/7117911005841063944