Themes, css file

Ignition
,
1

Good day,

I am making my first steps with the themes functionality in Perspective. My first .css file looked like this and was named light-hjs.css:

/*@import "./light/index.css";*/
.ia_button--primary {
    background-color: #00FF00;
    color: #000000;
}

and it was placed in the folder : c:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes
After restarting the gateway by restoring a project the new theme was selectable and a button gets a green background color. So far so good.
When I uncomment the first line and save the modification, after a new restart of the gateway I am getting the old css back.
What am I doing wrong?

2

The theme files supplied by IA are not to be modified. They are entirely under the control of the gateway, and your changes are subject to reversion at any time.

Use your own theme file names. Import from the original theme files for any functionality you wish to keep.

(All explained in the readme in the theme folder.)

3

Are you aware of the stylesheet?

2 Likes
4

If you want to set up a theme similar to the light and dark themes, I would suggest you start by duplicating light.css and the entire \light directory in that same folder, then renaming to light-hjs.css and \light-hjs.

Then, go into light-hjs.css and change

/*@import "./light/index.css";*/
.ia_button--primary {
    background-color: #00FF00;
    color: #000000;
}

to

@import "./light-hjs/index.css";
.ia_button--primary {
    background-color: #00FF00;
    color: #000000;
}

If that still doesn't set your button color, you can cut the ia_button--primary definition you have in the index-hjs.css file and paste it in \index-hjs\index.css (after the @import statements) OR you can also navigate to the correct location inside the light-hjs folder and modify the .ia_button--primary class with your custom colors. There is a README in the \themes directory that outline all of this as well.

If you're creating a theme to only change the primary button color, that is overkill. You can easily add ad-hoc CSS properties and definitions in the Advanced Style Sheet (added v8.1.22).

1 Like