Changing the default colors of perspective components

General Discussion
,
1

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

2

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

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

1 Like
3

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.

2 Likes
4

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

2 Likes
5

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.

2 Likes
6

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:

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

1 Like