小米科技|动态调整web系统主题? 看这一篇就够了( 三 )

这是为了结合 jit引擎，来动态的调整所有颜色的透明度。有了它我们就能编写出以下的代码:
h1{   @apply text-header-text;    // 等价于   // color: rgb(var(--color-header-text))  h2{   @apply text-header-text/70;   // 等价于   // color: rgb(var(--color-header-text) / 0.7)
这也是我们要给根元素中的 css变量赋值为 R G B 格式的原因了！
本质上讲，是我们在利用原生 css 中 rgb(rgba是rgb的别名) 构造方法来创建颜色变量:
/* rgb的函数Syntax */ rgb(255255255) /* white */ rgb(255255255.5) /* white with 50% opacity */ rgb(255 255 255) /* CSS Colors 4 space-separated values */ rgb(255 255 255 / .5); /* white with 50% opacity using CSS Colors 4 space-separated values */
从上面这段代码片段中，我们可以看到，列出的 rgb(R G B / A)就是现在使用的方案。
当然我们也可以更改上述的 getRgbString 和 withOpacityValue 这2个方法，把  这个分隔符加入进去，再把 / 去除，从而使用它 rgb(RGBA) 这个构造方式。
这样我们在使用时就可以生成出这样的样式:
.neutral{   background-color: rgb(var(--color-neutral-muted));   &:hover{     background-color: rgb(var(--color-neutral-muted) / 0.4);
是不是非常的灵活？
接下来只要把 extendColors.cjs 导入进 tailwind.config.js 配置中，就可以自动生成 class 和 vscode 的智能提示了:
// tailwind.config.js const extendColors = require('./client/theme/extendColors.cjs') const colors = require('tailwindcss/colors') module.exports = {   // ...   theme:{     extend:{       colors:{         ...extendColors.colors              //...          colors:{       transparent: 'transparent'       current: 'currentColor'       black: colors.black       white: colors.white       gray: colors.gray          // ...      // ...
这样，我们只需要把主题变更依赖的变量们，写进各种控件， layout ，容器中去，所有的 css 变量就生效了，切换主题就非常的方便。
5. 动态修改根节点变量
很多场景下我们的应用主题，不是从前端维护的几套预设方案中进行选择，而是由用户自定义配置，保存在数据库中，每次请求后端才能获取到。
这种获取方式意味着前端这里，只保留一套默认的预设方案。所以我们通常会在获取到后端给的主题数据后，动态的修改 css变量的值。
具体怎么做呢？本质上就是调用，来设置 document.documentElement 的变量值。
为了让它更好用，我们可以进行封装，并建立一套浏览器本地的缓存机制，这些在此不再叙述，条条大道通罗马。