在运行时动态更新 Tailwindcss 中的 CSS 变量定义

Posted 2023-03-07

【中文标题】在运行时动态更新 Tailwindcss 中的 CSS 变量定义

【英文标题】：Dynamically update CSS variables definitions in Tailwindcss during runtime

【发布时间】：2021-05-13 22:36:15

【问题描述】：

我想做什么？

我有一个组件库网站，我想在其中展示不同的颜色主题。我有一个选择框，用户可以在其中切换不同的主题。

我有两个 css 文件，我们分别命名为西瓜和蓝莓。

// blueberry/index/.css
:root 
--color-1: indigo;

// watermelon/index/.css
:root 
--color-1: green;

在我的 tailwind.config.js 上

//tailwind.config.js
theme: 
 extend: 
  color: 
   primary: "var(--color-1)"

代码发生了什么

我在 selectedTheme 上有一个观察者，所以每次值更改时，我都会导入正确的主题 css 文件。

import  ref, watch  from "vue"

export default 
  setup() 
    const selectedTheme = ref("watermelon")
    const themeOptions = [
       name: "Blueberry", value: "blueberry" ,
       name: "Watermelon", value: "watermelon" ,
    ]
    async function importTheme(theme) 
      try 
        await import(`../themes/$theme/index.css`)
       catch (error) 
        console.log(error)
      
    
    watch(
      selectedTheme,
      async newValue => 
        console.log("changing", newValue)
        await importTheme(newValue)
      ,
       immediate: true 
    )
    return  themeOptions, selectedTheme 
  ,

</script>
<style>
#app 
  font-family: "Poppins", sans-serif;

</style>

现在发生了什么

第一次切换 -> 主题从西瓜切换到蓝莓 -> 组件颜色从绿色变为靛蓝。

在第二次切换后 -> 没有任何反应，组件颜色不会改变。

我不确定这里发生了什么。有人可以启发我或指出正确的方向吗？

应该发生什么

即使在第一次之后也可以进行切换。从绿色切换到靛蓝，然后再切换回绿色。

【问题讨论】：

控制台是否显示更改？

@Dan，是的

@Dan 我现在的想法是，每当我导入新的 index.css 时，它都会覆盖之前导入的 index.css，因为 css 变量具有相同的名称。 1.第一次切换->主题从西瓜切换到蓝莓->组件颜色从绿色变为蓝色。 2. 在第二次开关之后 -> 没有任何反应，组件颜色不会改变。

我猜一旦加载了 CSS 模块，该模块的未来重新加载将被忽略。由于卸载 CSS 模块并非易事，我建议重新考虑该模式。例如，您的主题可能有不同命名的类。或者你可以使用一个根元素来改变基于selectedTheme的类，然后每个主题定义如下样式：.indigo .mydiv

不客气。是的，像<div :class="selectedTheme"> 这样就足够了

【参考方案1】：

我最终做的是像这样声明 css 变量：

.blueberry-theme 
 --color-1:indigo;

和

.watermelon-theme 
 --color-1: green;

在 vue 组件观察器上，每次更改 selectedTheme 时，我都会使用 document.documentElement.className 向根元素 div 添加一个类：

示例：如果选择了 Blueberry，则在根 div 元素上应用“blueberry-theme”类。

<template>
  <Select :options="themeOptions" v-model="selectedTheme" />
</template>

<script>
import  ref, watch  from "vue"
export default 
  setup() 
    const selectedTheme = ref("blueberry-theme")

    const themeOptions = [
       name: "Blueberry", value: "blueberry-theme" ,
       name: "Watermelon", value: "watermelon-theme" ,
    ]

    function setTheme(theme) 
      document.documentElement.className = theme
    

    watch(
      selectedTheme,
      async newValue => 
        await setTheme(newValue)
      ,
       immediate: true 
    )

    return  themeOptions, selectedTheme 
  ,

</script>

【参考方案2】：

不确定是否是您想要的，但您可以通过以下方式动态更改 css 变量：

  if (typeof window !== 'undefined') 
      document.documentElement.style.setProperty('--color-1', someCoolColor)
  

这将反映到使用此变量的顺风样式中。