Dynamic adjustment of web theme (2) Extraction

动态调整web主题(2) Extraction

自从写完 动态调整web系统主题? 看这一篇就够了! 这篇文章之后,I've always wanted to distill the ideas in this article,发布成一个 npm 包.

Just had time to write this week tailwind-css-variables-theme-generator, This package is a summary of the previous ideas,There are more detailed documentation.

Some improvements to previous ideas

原先在 之前那篇文章 里提到过 scss 与 js 通信的方法,主要依靠 webpack 的 :export 关键字,thereby exporting one js 对象.

There is now a more efficient solution.

我们知道 sass 是支持 CustomFunction 的, Then we can declare one js Function to extract what needs to be exposed sass 变量.

For example, we can write such a method:

// 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 The export is obviously more free,And a high degree of customization.

tailwind-css-variables-theme-generator 是什么？

This is a file generator,它以一个 scss 文件作为入口,Export the association exposed scss 变量,and use these variables,Generate configuration files through template rendering.

The configuration file is divided into 3 类:

1. tailwindcss v3 扩展文件 extendColors.js
2. sass-loader 附加文件 variables.scss
3. Optional tool file root.scss | export.scss | util.scss

where these files are used,在此不再叙述,Github文档上都有.

Example of the theme color switching of the preset scheme:

: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 It can be two-way binding with a value in the code,非常简单.(vue 可使用 vue-meta Bind directly to a value)

The backend controls dynamic switching

CSSStyleDeclaration.setProperty(property: string, value: string, priority?: string): void

可参考ThemeVariablesManager, It is a little bit of packaging.

Demo

Live Demo 右上角切换 Light / Dark 模式

Live Demo Source Code