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
use the stylesheet.css
Thanks a lot
I have searched for the selector that defines the theme background color but I couldn't find it
Here are some colors defined in the light theme
The other themse use the same vars
: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
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.
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.