Theme Changes Not Registering

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.

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?

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!

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

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

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.

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

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

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.

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

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?

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!