# Change a CLASS based on a variable?

**URL:** <https://community.weweb.io/t/change-a-class-based-on-a-variable/3613>\
**Category:** Ask us anything\
**Created:** [July 20, 2023, 12:32pm UTC](https://community.weweb.io/t/change-a-class-based-on-a-variable/3613 "2023-07-20T12:32:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [July 20, 2023, 12:32pm UTC](https://community.weweb.io/t/change-a-class-based-on-a-variable/3613/1 "2023-07-20T12:32:45Z")

</div>

Is there a way to change a class based on a variable? So, if variable = true then use this class, if variable = false - then use this class?

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [July 20, 2023, 12:48pm UTC](https://community.weweb.io/t/change-a-class-based-on-a-variable/3613/2 "2023-07-20T12:48:06Z")

</div>

Hi, you can create a state, bind a condition, and select a different class for each state 🙂

---

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [July 20, 2023, 1:23pm UTC](https://community.weweb.io/t/change-a-class-based-on-a-variable/3613/4 "2023-07-20T13:23:26Z")

</div>

Hey Alexis - I can’t figure out how to “select a different class for each state” … any further guidance most appreciated. The AI Co-Pilot says “I don’t know” 😉

---

<div class="post-metadata">

**Author:** ![Alexis](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/alexis/32/13248_2.png) [@Alexis](https://community.weweb.io/u/Alexis)\
**Post date:** [July 20, 2023, 1:47pm UTC](https://community.weweb.io/t/change-a-class-based-on-a-variable/3613/5 "2023-07-20T13:47:06Z")

</div>

Select a state, then select a class. Then select another state and select another class.

Now, if you toggle the state your class should toggle too

---

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [July 20, 2023, 2:04pm UTC](https://community.weweb.io/t/change-a-class-based-on-a-variable/3613/6 "2023-07-20T14:04:10Z")

</div>

Okay, that works. Thx!

I don’t suppose there is a way to do this globally? Or more efficiently than adding that to every element?

In other words - change ALL INSTANCES of one class to another class based on a state change?

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [July 20, 2023, 2:35pm UTC](https://community.weweb.io/t/change-a-class-based-on-a-variable/3613/7 "2023-07-20T14:35:23Z")

</div>

If your changes are based on global variable, what you can do is doing the opposite: having the property inside the class being dynamic, and always apply the same class. Formula are compatible with classes.

So for example, you could have a property color bind to a formula depending on a theme, and save this inside a class. Then each element with that class will have the behaviour of changing color depending on the theme.

---

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [July 20, 2023, 2:58pm UTC](https://community.weweb.io/t/change-a-class-based-on-a-variable/3613/8 "2023-07-20T14:58:52Z")

</div>

Okay - this is exactly what I am going for. I’ll give it try. Thx!!

---

<div class="post-metadata">

**Author:** ![Mark\_Pederson](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark_pederson/32/14758_2.png) [@Mark\_Pederson](https://community.weweb.io/u/Mark_Pederson)\
**Post date:** [July 20, 2023, 3:05pm UTC](https://community.weweb.io/t/change-a-class-based-on-a-variable/3613/9 "2023-07-20T15:05:41Z")

</div>

That was easy … and awesome.