Theme Changes Not Registering

Ignition
,
1

I’m using Perspective 8.1.11 and I’ve been trying to adjust some of the themes, but I’m finding that any changes I make don’t seem to be being applied to what’s actually displaying and that I can’t make a custom theme.

First off, I tried to duplicate light-cool in the C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes folder. I copied both the folder and main css file, renamed the folder to light-custom, file to light-custom.css, and changed light-custom.css to be:

@import “./light-custom/index.css”;

Then I changed the theme in the designer to light-custom, and while the theme changed, it just effectively removed the theme because it won’t apply the custom one. The error I get is:

Refused to apply style from ‘http://localhost:8088/data/perspective/themes/light-custom.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

It registers as a CSS file in the file explorer. This issue persists after gateway restart. I tried to check for comments or whatever as per Refused to apply style but I didn’t have luck, plus I’m not sure why copying a style class that does work… doesn’t work.

image
image700×409 7.04 KB

Secondly, I decided to try to adjust the light theme directly, but nothing I added seemed to do anything. To see if it was just being overridden, I decided to check by simply changing a variable definition. I set a component to use --seq-1 as a colour, and it popped up as purple (great). Then I went into light/variables.css and changed the definition of --seq-1 to be #000000. Saved it, tried refreshing the browser, tried to toggle the theme selected, tried restarting the gateway, etc, but the component stayed purple instead of changing to black. How do I get Ignition to register my theme changes?
image

I haven’t tried anything with themes before so it’s entirely possible I’ve missed a step to make things work or have something incorrectly configured, but I can’t figure out what I’m doing wrong from the README. Any help would be great, thanks!

2

Any time I make changes to the theme files, it usually doesn’t apply to the designer or client UNTIL I merge changes from gateway (see button below):
image

Also, when you’re working in the designer with a custom theme, merge changes (a few times, I noticed that if I save a file and then merge changes in designer within ~5 seconds of saving, it won’t apply), close the view, and then reopen it and you’ll see custom theme changes.

1 Like
3

Thanks, that’s definitely a good tip I’ll keep in mind and apply in the future, but unfortunately it’s not making --seq-1 any less purple for me right now.

4

Can you open a client in the browser, open the dev tools, Element and Styles and see what is being displayed?

image
image657×908 42 KB

Also, how are you testing whether the color is working? Are you setting the color on a label somewhere with an inline style?

5

The component is using var(–seq-1) as expected, and --seq-1 shows as #AE74E8, instead of the #000000 I set it to in the file.

image
image679×634 18 KB

I’m testing it on a numeric entry field by setting the style backgroundColor to --seq-1.
image

6

Try setting backgroundColor to var(--seq-1). This is 100% an issue, but it doesn’t explain why --seq-1 is not #000000… Change this and let’s see if we get any closer

Also, your screenshot shows the CSS variables are coming from light.css. Can you see if in the devtools there is a another :root declaration but one that comes from light-custom.css?

7

sigh I figured it out. But it has nothing to do with themes and getting the changes to load with Ignition and everything to do with the fact that when I upgraded to 8.1 from 8.0 a couple days ago I somehow managed to make its source directory out of an entirely different folder than Program Files, so I was updating the file for the old version of Ignition. Finding the correct directory really helps :woman_facepalming:

Thanks for your help, sorry it was just a stupid mistake on my part!

2 Likes