Dynamically update CSS variables definitions in Tailwindcss during runtime

Question

What I am trying to do?

I have a component library website where I want to show the different color themes. I have a select box where the user can switch between different themes.

I have two css files, lets name them watermelon and blueberry.

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

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

and on my tailwind.config.js

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

Whats happening on the code

I have a watcher on selectedTheme, so everytime value changes, I import the correct theme css file.

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>

What is happening right now

On the first switch -> The theme is switched from watermelon to blueberry -> component color changes from green to indigo.

On second switch and after -> nothing happens, component color does not change.

I'm not sure what's happening here. Can someone enlighten me or point me to the right direction?

What is supposed to happen

Switching works even after the first. Switch from green to indigo and then back to green.

@Dan my thought process right now is that whenever I import the new index.css, it overrides the previously imported index.css because the css variables have the same name. 1. On the first switch -> The theme is switched from watermelon to blueberry -> component color changes from green to blue. 2. On second switch and after -> nothing happens, component color does not change. — gsmig
– gsmig, Commented Feb 10, 2021 at 9:30
I'm guessing that once a CSS module is loaded, future reloads of that module are ignored. Since unloading a CSS module is no trivial task, I would suggest rethinking the pattern. For example, your themes could have differently named classes. Or you could use a root element that changes class based on selectedTheme, and then each theme defines styles like: .indigo .mydiv {} — Dan
– Dan, Commented Feb 10, 2021 at 10:49
You're welcome. Yeah, something like <div :class="selectedTheme"> would be sufficient — Dan
– Dan, Commented Feb 10, 2021 at 11:03

gsmig · Accepted Answer · 2021-02-11 07:45:30Z

What I ended up doing was declaring css variables like so:

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

and

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

and on the vue component watcher, I add a class to root element div using document.documentElement.className everytime selectedTheme is changed:

Example: if Blueberry is selected, "blueberry-theme" class is applied on the root div element.

<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>

alexandre_anicio · Accepted Answer · 2021-10-14 13:25:29Z

0

Not sure if is what you want, but you can change css variables dynamically by doing:

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

and this would be reflefect into tailwind styles that uses this variable.

answered Oct 14, 2021 at 13:25

alexandre_anicio

19811 bronze badges

Collectives™ on Stack Overflow

Dynamically update CSS variables definitions in Tailwindcss during runtime

What I am trying to do?

Whats happening on the code

What is happening right now

What is supposed to happen

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I am trying to do?

Whats happening on the code

What is happening right now

What is supposed to happen

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related