# Changing the default colors of perspective components

**URL:** <https://forum.inductiveautomation.com/t/changing-the-default-colors-of-perspective-components/64801>\
**Category:** General Discussion\
**Tags:** ignition80, perspective\
**Created:** [October 4, 2022, 2:59pm UTC](https://forum.inductiveautomation.com/t/changing-the-default-colors-of-perspective-components/64801 "2022-10-04T14:59:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeroen\_Vandenbogaerd](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jeroen_vandenbogaerd/32/39219_2.png) [@Jeroen\_Vandenbogaerd](https://forum.inductiveautomation.com/u/Jeroen_Vandenbogaerd)\
**Post date:** [October 4, 2022, 2:59pm UTC](https://forum.inductiveautomation.com/t/changing-the-default-colors-of-perspective-components/64801/1 "2022-10-04T14:59:44Z")

</div>

Hi Everyone,

As a company we would like to import our brand colors into the perspective components by default.  
We already found out how to style these colors inside the props window. However this takes alot of time if we have to style these charts every single time we add a new one.

Is there a way to change the default colors inside the perspective components? Like editing .css or .json files? If there is a way where can i locate these files to edit them?

Thank you in advance  
Kind regards

Jeroen

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 4, 2022, 3:03pm UTC](https://forum.inductiveautomation.com/t/changing-the-default-colors-of-perspective-components/64801/2 "2022-10-04T15:03:43Z")

</div>

You can change Perspective's theme. Various themes are provided, but you can create new ones, including extending from the provided ones.

[https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes)

Beware: you are expected to support this yourself. Ignition is powerful enough and configurable enough to let you shoot yourself in the foot.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [October 4, 2022, 3:06pm UTC](https://forum.inductiveautomation.com/t/changing-the-default-colors-of-perspective-components/64801/3 "2022-10-04T15:06:08Z")

</div>

Ooo! You tagged this v8.0. I'm not sure how far back in v8.0 the customizable theming is available. v8.0.13, perhaps.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 4, 2022, 3:22pm UTC](https://forum.inductiveautomation.com/t/changing-the-default-colors-of-perspective-components/64801/4 "2022-10-04T15:22:07Z")

</div>

In 8.1.22, there will be a project-scoped "stylesheet" resource (editable in the designer) that allows you to enter arbitrary CSS:

> [@Nightly 8.1 Changelogs - 2022](https://forum.inductiveautomation.com/t/nightly-8-1-changelogs-2022/54636/142):
>
> Weekly Changelog: 8.1.22-b20220930 Platform 5000: Add system.print functions in all scopes Added the functions 'system.print.getPrinterNames()' and 'system.print.getDefaultPrinterName()' to all scopes. Visualization 6224: Add option to adjust Designer's time zone without the Vision module Added a new Designer property for specifying the time zone within the designer. This takes precedence over Vision's Client Timezone setting If Vision is installed and applies only to the Designer. Enter…

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 4, 2022, 4:07pm UTC](https://forum.inductiveautomation.com/t/changing-the-default-colors-of-perspective-components/64801/5 "2022-10-04T16:07:00Z")

</div>

As Phil said, the truly cohesive theming of Perspective didn't arrive until 8.0.13. The scope of those changes was absolutely massive and so some components had pieces that were missed; we added many changes to theming over the next several versions.

Theming is much more reliable and consistent in newer versions, and the new stylesheet resource Paul mentioned allows for configuring appearance of components at the PROJECT level, instead of the GATEWAY level scope of the theming files.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [October 4, 2022, 6:57pm UTC](https://forum.inductiveautomation.com/t/changing-the-default-colors-of-perspective-components/64801/6 "2022-10-04T18:57:21Z")

</div>

One of the easiest ways you can start doing this (taking into account what the other guys said above) is to clone the `light` theme and create your own company theme (follow the readme in the `themes` folder for this) and change the variable `var(--callToAction)`, like so:

```css
:root {
    --callToAction: #456789; /* your company primary color */
}

```

From my experience, this variable is used in a lot of places, from the Power Chart default actions to Dropdowns to Table actions. This will get you pretty far in terms of changing the primary color from the default blue one IA uses to something prettier.
