# Theme Changes Not Registering

**URL:** <https://forum.inductiveautomation.com/t/theme-changes-not-registering/52683>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [November 3, 2021, 3:56pm UTC](https://forum.inductiveautomation.com/t/theme-changes-not-registering/52683 "2021-11-03T15:56:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 3, 2021, 3:56pm UTC](https://forum.inductiveautomation.com/t/theme-changes-not-registering/52683/1 "2021-11-03T15:56:53Z")

</div>

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](https://forum.inductiveautomation.com/t/refused-to-apply-style/33197) but I didn’t have luck, plus I’m not sure why copying a style class that does work… doesn’t work.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/1/d1ccd761b1c076cfe0ee10bec6773859e581e006.png)

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/b/0b428c5aebedad0a3536bc3aa3698aca53ca64bf.png)

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!

---

<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:** [November 3, 2021, 4:08pm UTC](https://forum.inductiveautomation.com/t/theme-changes-not-registering/52683/2 "2021-11-03T16:08:21Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/c/9c728ed547130bc9d75fd3b44448096537c50f40.png)

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.

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 3, 2021, 4:16pm UTC](https://forum.inductiveautomation.com/t/theme-changes-not-registering/52683/3 "2021-11-03T16:16:30Z")

</div>

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.

---

<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:** [November 3, 2021, 4:25pm UTC](https://forum.inductiveautomation.com/t/theme-changes-not-registering/52683/4 "2021-11-03T16:25:14Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/954ac4cc0c5de617fb676af077f8da4adefa0b64.png)

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

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 3, 2021, 4:39pm UTC](https://forum.inductiveautomation.com/t/theme-changes-not-registering/52683/5 "2021-11-03T16:39:33Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/6/16b65eda3ede95ddd0e950c9c484b7ea107f4797.png)

I’m testing it on a numeric entry field by setting the style backgroundColor to --seq-1.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fd09530f7716b0230700ac068dbadd5b09cd7fe5.png)

---

<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:** [November 3, 2021, 4:44pm UTC](https://forum.inductiveautomation.com/t/theme-changes-not-registering/52683/6 "2021-11-03T16:44:51Z")

</div>

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`?

---

<div class="post-metadata">

**Author:** ![catherine.fowler](https://avatars.discourse-cdn.com/v4/letter/c/34f0e0/32.png) [@catherine.fowler](https://forum.inductiveautomation.com/u/catherine.fowler)\
**Post date:** [November 3, 2021, 4:50pm UTC](https://forum.inductiveautomation.com/t/theme-changes-not-registering/52683/7 "2021-11-03T16:50:58Z")

</div>

_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 🤦‍♀️

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