# Themes, css file

**URL:** <https://forum.inductiveautomation.com/t/themes-css-file/93955>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [July 31, 2024, 7:49am UTC](https://forum.inductiveautomation.com/t/themes-css-file/93955 "2024-07-31T07:49:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Henk](https://avatars.discourse-cdn.com/v4/letter/h/b5ac83/32.png) [@Henk](https://forum.inductiveautomation.com/u/Henk)\
**Post date:** [July 31, 2024, 7:49am UTC](https://forum.inductiveautomation.com/t/themes-css-file/93955/1 "2024-07-31T07:49:35Z")

</div>

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:

```python
/*@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?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [July 31, 2024, 11:52am UTC](https://forum.inductiveautomation.com/t/themes-css-file/93955/2 "2024-07-31T11:52:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [July 31, 2024, 1:40pm UTC](https://forum.inductiveautomation.com/t/themes-css-file/93955/3 "2024-07-31T13:40:02Z")

</div>

Are you aware of the stylesheet?

> **[Style Classes | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/style-classes#enabling-the-advanced-stylesheet)**
>
> A Style Class is a group of Style settings that are saved together. Style Classes can be applied to multiple components to provide consistency in design. A Style Class enables you to define style elements in one place, and then quickly apply that...

---

<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:** [July 31, 2024, 2:33pm UTC](https://forum.inductiveautomation.com/t/themes-css-file/93955/4 "2024-07-31T14:33:53Z")

</div>

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

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

```

to

```css
@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).