动态调整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 类:

1. tailwindcss v3 扩展文件 extendColors.js
2. sass-loader 附加文件 variables.scss
3. 可选的工具文件 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 模式

Live Demo Source Code