# Theme colors for text and background

**URL:** <https://forum.inductiveautomation.com/t/theme-colors-for-text-and-background/98993>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 22, 2024, 2:01pm UTC](https://forum.inductiveautomation.com/t/theme-colors-for-text-and-background/98993 "2024-11-22T14:01:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [November 22, 2024, 2:01pm UTC](https://forum.inductiveautomation.com/t/theme-colors-for-text-and-background/98993/1 "2024-11-22T14:01:16Z")

</div>

Hello!,

I got the standard theme menu on the menu bar  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/d/4d57fcadd111677863194a0d8f28fa778a36c0bb.png)

When I using light themes all is fine.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/1981f96e660853e28e9d3a33875a214d5b0aa64c.png)

When I change to dark themes some text doesn´t looke well because I haven´t setup the css to change colors...

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/e/aefbe498a426ab1b744b088952b7f1b445d711d1.png)

How to setup the css so the colors of some elements change on dark theme in Ignition Perspective?

Is not a important feature on my project but if I set it up would be great.

Thanks.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [November 22, 2024, 2:56pm UTC](https://forum.inductiveautomation.com/t/theme-colors-for-text-and-background/98993/2 "2024-11-22T14:56:13Z")

</div>

- Option 1: only use colors that are defined in [Perspective Built-In Themes | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/perspective-built-in-themes#built-in-theme-colors).
- Option 2: [Creating and Using Custom Perspective Themes | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/creating-and-using-custom-perspective-themes#creating-a-custom-theme).

For option 2 you should:

- Create a custom theme for each of the built-in themes you are likely to use. This could be 'light', 'dark', 'light-cool', etc.
- Pay attention to where to place your custom themes so they're not overwritten on Ignition upgrade.
- Define colors as variables. e.g. `--div-2: #7D3CBD;` That way you can assign the css variable to your components but they can be different in each theme.

**Plan your theme**. Use a theme colors that go well together. There are many web tools to help. e.g.,  
[https://www.canva.com/colors/color-wheel/](https://www.canva.com/colors/color-wheel/)

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [November 25, 2024, 7:48am UTC](https://forum.inductiveautomation.com/t/theme-colors-for-text-and-background/98993/3 "2024-11-25T07:48:15Z")

</div>

Thanks Transistor!