此页面需要javascript支持,请在浏览器中启用javascript

动态调整web主题(2) 萃取篇

npm
dart-sass
js
css-variables
theme
共580个字,阅读时间 3 分钟
阅读 

Image

动态调整web主题(2) 萃取篇

自从写完 动态调整web系统主题? 看这一篇就够了! 这篇文章之后,一直想把这篇文章中的思路提炼出来,发布成一个 npm 包。

这周正好有空编写了 tailwind-css-variables-theme-generator, 这个包就是之前思路的一个总结,里面有比较详细的使用文档。

针对之前思路的一些改进

原先在 之前那篇文章 里提到过 scssjs 通信的方法,主要依靠 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.documentElementdata-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

Explore comments

© 2022 icebreaker 苏ICP备19002675号-2
version:1.3.0