经验啦

  1. 首页 > 科技 > >

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

var


这是为了结合 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 的变量值 。
为了让它更好用 ， 我们可以进行封装 ， 并建立一套浏览器本地的缓存机制 ， 这些在此不再叙述 ， 条条大道通罗马 。

相关经验推荐


上一篇：notchmeister|应急电源：800A电流，没有电池，安全防爆防自燃，可以使用20年

下一篇：高通骁龙|能效超骁龙8 Gen1，骁龙865手机保值度再上升！