# Alternating colors with an expression

**URL:** <https://forum.inductiveautomation.com/t/alternating-colors-with-an-expression/58117>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [April 6, 2022, 3:40pm UTC](https://forum.inductiveautomation.com/t/alternating-colors-with-an-expression/58117 "2022-04-06T15:40:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [April 6, 2022, 3:40pm UTC](https://forum.inductiveautomation.com/t/alternating-colors-with-an-expression/58117/1 "2022-04-06T15:40:04Z")

</div>

Good day! What bit of code to I add to make colors alternate(like flashing) when an expression is true. here is my base code.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/1/512ec5c1089277c34f110f23489c55fc02ef8d6d.png)

It currently only displays red, but i would like add a yellow alternate in it.

thanks you

---

<div class="post-metadata">

**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\
**Post date:** [April 6, 2022, 3:51pm UTC](https://forum.inductiveautomation.com/t/alternating-colors-with-an-expression/58117/2 "2022-04-06T15:51:27Z")

</div>

Possible the simplest flasher is  
if(`dateExtract(now(100),'ms')>500,<true condition>,<false condition>)`  
or  
if(`dateExtract(now(100),'sec')%2,<true condition>,<false condition>)`  
depending on the frequency you want.

Note: If you have more than one component flashing this way, they won’t be particularly synchronized, which I think looks ugly. I generally make a flasher property with one of the above bindings at the highest level it makes sense (depends on if you’re going to have embedded views or not) and use that in the if statement instead.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [April 6, 2022, 3:51pm UTC](https://forum.inductiveautomation.com/t/alternating-colors-with-an-expression/58117/3 "2022-04-06T15:51:37Z")

</div>

You can use css. Try playing with this to find the settings you want:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/8378d82ee625138db7a003eb4530c79396914220.png)

This alternates between a background color set on an element, and the background color set on this class (here yellow).

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [April 6, 2022, 4:15pm UTC](https://forum.inductiveautomation.com/t/alternating-colors-with-an-expression/58117/4 "2022-04-06T16:15:39Z")

</div>

How do I get to the style classes?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [April 6, 2022, 4:17pm UTC](https://forum.inductiveautomation.com/t/alternating-colors-with-an-expression/58117/5 "2022-04-06T16:17:05Z")

</div>

You can create style classes by adding styles in that folder:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/6348859f290bba8b2783ec31ea4f565b2949a69e.png)

---

<div class="post-metadata">

**Author:** ![mjohnson0238](https://avatars.discourse-cdn.com/v4/letter/m/4bbf92/32.png) [@mjohnson0238](https://forum.inductiveautomation.com/u/mjohnson0238)\
**Post date:** [April 6, 2022, 4:54pm UTC](https://forum.inductiveautomation.com/t/alternating-colors-with-an-expression/58117/6 "2022-04-06T16:54:14Z")

</div>

Thanks alot. I have my style set up and running now. Big help