动态调整web主题(2) 萃取篇
作者:互联网
动态调整web主题(2) 萃取篇
自从写完 动态调整web系统主题? 看这一篇就够了! 这篇文章之后,一直想把这篇文章中的思路提炼出来,发布成一个 npm
包。
这周正好有空编写了 tailwind-css-variables-theme-generator
, 这个包就是之前思路的一个总结,里面有比较详细的使用文档。
针对之前思路的一些改进
原先在 之前那篇文章 里提到过 scss
与 js
通信的方法,主要依靠 webpack
的 :export
关键字,从而导出一个 js
对象。
现在有了更加高效的解决方案。
我们知道 sass
是支持 CustomFunction
的, 那么我们就可以声明一个 js Function
来提取出需要暴露的 sass
变量。
比如我们可以写这样一个方法:
// typescript
const exposeAarry: OrderedMap<SassString, SassColor>[] = []
'expose($map)': (args: Value[]) => {
const value = args[0].assertMap('map')
const map = value.contents as OrderedMap<SassString, SassColor>
exposeAarry.push(map)
return value
}
这样我们在 scss
里就可以这样写:
@use './constants.scss' as C;
$other-vars: (
// same name : override ↑ constants map
--color-canvas-default-transparent: rgba(32, 54, 85, 0),
--color-marketing-icon-primary: #053c74,
--color-custom-text-color: #546821
);
// 使用 expose 导出 SassMap
$expose: expose(C.$root-vars);
$expose1: expose($other-vars);
从而将 SassMap
转化为 Js Map
进行处理。
这比使用 Webpack
的导出显然更加自由,且自定义程度高。
tailwind-css-variables-theme-generator
是什么?
这是一个文件生成器,它以一个 scss
文件作为入口,导出关联暴露的 scss
变量,并使用这些变量,通过模板渲染生成配置文件。
配置文件总共分为 3
类:
tailwindcss v3
扩展文件extendColors.js
sass-loader
附加文件variables.scss
- 可选的工具文件
root.scss | export.scss | util.scss
其中这些文件的使用方式,在此不再叙述,Github文档上都有。
预设方案主题色切换示例:
:root {
@each $var, $color in C.$root-vars {
#{$var}: Util.getRgbString($color);
}
}
[data-color-mode='light'] {
@each $var, $color in Light.$light-vars {
#{$var}: Util.getRgbString($color);
}
}
[data-color-mode='dark'] {
@each $var, $color in Dark.$dark-vars {
#{$var}: Util.getRgbString($color);
}
}
接下来,只要让 document.documentElement
的 data-color-mode
这个 Attribute
和代码中一个值双向绑定即可,非常简单。(vue
可使用 vue-meta
直接和某个值绑定)
后端控制动态切换
CSSStyleDeclaration.setProperty(property: string, value: string, priority?: string): void
可参考ThemeVariablesManager, 算是一点浅浅的封装。
Demo
Live Demo 右上角切换 Light
/ Dark
模式
标签:scss,web,vars,map,color,expose,var,动态,萃取 来源: https://blog.csdn.net/qq_33020601/article/details/122522185