返回首页
动态调整 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.jssass-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 模式