# Custom themes on docker image

**URL:** <https://forum.inductiveautomation.com/t/custom-themes-on-docker-image/86588>\
**Category:** Ignition\
**Created:** [February 29, 2024, 10:03am UTC](https://forum.inductiveautomation.com/t/custom-themes-on-docker-image/86588 "2024-02-29T10:03:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Morgan1](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@John\_Morgan1](https://forum.inductiveautomation.com/u/John_Morgan1)\
**Post date:** [February 29, 2024, 10:03am UTC](https://forum.inductiveautomation.com/t/custom-themes-on-docker-image/86588/1 "2024-02-29T10:03:30Z")

</div>

Hi folks,

I am used to editing and modifying themes located in  
/../inductive automation/ignition/data/../themes/someFile.css

I am new to ignition on docker

I don't know how to access theme CSS file so I can modify theme colors or add a new theme CSS file

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 29, 2024, 10:26am UTC](https://forum.inductiveautomation.com/t/custom-themes-on-docker-image/86588/2 "2024-02-29T10:26:21Z")

</div>

use the stylesheet.css

> **[Style Classes | Ignition User Manual](https://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:** ![John\_Morgan1](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@John\_Morgan1](https://forum.inductiveautomation.com/u/John_Morgan1)\
**Post date:** [February 29, 2024, 11:20am UTC](https://forum.inductiveautomation.com/t/custom-themes-on-docker-image/86588/3 "2024-02-29T11:20:23Z")

</div>

Thanks a lot  
I have searched for the selector that defines the theme background color but I couldn't find it

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 29, 2024, 11:42am UTC](https://forum.inductiveautomation.com/t/custom-themes-on-docker-image/86588/4 "2024-02-29T11:42:17Z")

</div>

Here are some colors defined in the light theme  
The other themse use the same vars

```auto
:root {
    --white: #FFFFFF;
    --black: #000000;
    --red-20: #FAD4D4;
    --red-30: #F99797;
    --red-50: #F55353;
    --red-60: #DE1B1B;
    --red-90: #661414;
    --neutral-10: #FAFAFA;
    --neutral-20: #F4F4F4;
    --neutral-30: #D8D8D8;
    --neutral-40: #BDBDBD;
    --neutral-50: #A1A1A1;
    --neutral-60: #767676;
    --neutral-70: #5E5E5E;
    --neutral-80: #515151;
    --neutral-90: #323232;
    --neutral-100: #161616;
    --seq-1: #AE74E8;
    --seq-2: #9659D6;
    --seq-3: #7D3CBD;
    --seq-4: #642B9E;
    --seq-5: #4B2175;
    --seq-6: #371C52;
    --div-1: #642B9E;
    --div-2: #7D3CBD;
    --div-3: #9656D6;
    --div-4: #AE74E8;
    --div-5: #C79BF2;
    --div-6: #DABCF7;
    --div-7: #EAD9FA;
    --div-8: #F5F0FA;
    --div-9: #D7FAF8;
    --div-10: #83F2EB;
    --div-11: #43DED3;
    --div-12: #21C2B7;
    --div-13: #0EA197;
    --div-14: #08827A;
    --div-15: #086962;
    --div-16: #09524D;
    --qual-1: #7D3CBD;
    --qual-2: #229AD6;
    --qual-3: #086962;
    --qual-4: #B01355;
    --qual-5: var(--red-50);
    --qual-6: var(--red-90);
    --qual-7: #038537;
    --qual-8: #114599;
    --qual-9: #ED5393;
    --qual-10: #CF7911;
    --containerRoot: var(--neutral-10);
    --container: var(--neutral-20);
    --containerNested: var(--neutral-30);
    --input: var(--white);
    --input--disabled: var(--neutral-40);
    --icon: var(--neutral-70);
    --icon--hover: var(--neutral-60);
    --icon--disabled: var(--neutral-40);
    --icon--selected: var(--neutral-10);
    --label: var(--neutral-90);
    --label--disabled: var(--neutral-60);
    --border: var(--neutral-50);
    --border--disabled: var(--neutral-50);
    --containerBorder: 1px solid var(--border);
    --boxShadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --boxShadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --boxShadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --boxShadow4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    --boxShadow5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    --boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);
    --callToAction: #0C7BB3;
    --callToActionHighlight: #E8F4FA;
    --callToAction--hover: #229AD6;
    --callToAction--active: #066391;
    --callToAction--activeAlt: #BBE5FA;
    --callToAction--activeAltInvis: #0B7BB2;
    --callToAction--disabled: var(--neutral-50);
    --error: var(--red-60);
    --info: #3272D9;
    --infoSecondary: #ACCBFC;
    --warning: #AD5F00;
    --warningSecondary: #F5BC76;
    --success: #038537;
    --borderRadius: 4px;
    --borderRadiusInput: 2px;
    --opacity-25: rgba(0, 0, 0, 0.25);
    --opacity-50: rgba(0, 0, 0, 0.50);
    --opacity-85: rgba(0, 0, 0, 0.85);
    --font-NotoSans: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --indicator: #1EC963;
    --indicatorOff: #0A2E18;
    --checkbox--checked: var(--callToAction);
    --checkbox--unchecked: var(--border);
    --checkbox--indeterminate: var(--callToAction);
    --checkbox--disabled: var(--input--disabled);
    --progressLinearTrack--determinate: var(--neutral-10);
    --progressLinearTrack--indeterminate: var(--neutral-10);
    --progressLinearBar--determinate: var(--infoSecondary);
    --progressLinearBar--indeterminate: var(--border);
    --toggleSwitch--selected: var(--callToAction);
    --toggleSwitch--unselected: var(--neutral-10);
    --radio--selected: var(--callToAction);
    --radio--unselected: var(--border);
    --radio--disabled: var(--input--disabled);
    --pipePrimaryFill: var(--neutral-20);
    --pipeSecondaryFill: #cccccc;
    --pipeStroke: var(--neutral-70);
    --pipeSelectStroke: var(--callToAction);
    --contextBackground: var(--white);
    --symbolFill--default: var(--neutral-20);
    --symbolFillAnimation--default: var(--neutral-50);
    --symbolStroke--default: var(--neutral-70);
    --symbolFill--running: var(--white);
    --symbolFillAnimation--running: var(--neutral-50);
    --symbolStroke--running: var(--neutral-70);
    --symbolFill--stopped: var(--neutral-40);
    --symbolStroke--stopped: var(--neutral-70);
    --symbolFill--faulted: #FAB6B6;
    --symbolStroke--faulted: #B80D0D;
}

```

if you plan to do changes to differen themes, then you probably prefer going with seperate files afterall

the background uses containerRoot

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [February 29, 2024, 12:18pm UTC](https://forum.inductiveautomation.com/t/custom-themes-on-docker-image/86588/5 "2024-02-29T12:18:45Z")

</div>

You can access the "inside" of the container with `docker exec -it {container name} bash`

To make things simpler on your dev machine, you can use a bind mount on the themes folder. This will make it accessible from outside of the container, so you can open files with your regular editor.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [February 29, 2024, 11:01pm UTC](https://forum.inductiveautomation.com/t/custom-themes-on-docker-image/86588/6 "2024-02-29T23:01:16Z")

</div>

I’ve been using the Perspective file upload component, with a short script to put the uploaded file into the themes folder and then refresh the project’s resources.