If you look at the attached file, you have darkened the theme mode.
So I know that the trend pop-up window comes out in a dark color.
However, even if the mode is dark, I want to brighten the trend pop-up window.
Is it possible to change the color?
I would just change the popup view's background color to something a little lighter, maybe '--neutral-40'. This way if the user selects the light theme there will still be contrast.
See Perspective Built-In Themes - Ignition User Manual 8.1 - Ignition Documentation
It would be best to define a background style that could be reused across various views that might need that background. Then if you need an edit you just do it once in the style and everything changes with that.
all popups or only this one?
the close icon doesnt seem to work tho idk ill check it out later after lunch
add this to the stylescheet
for all:
.popup.ia_popup{
--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-40);
--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;
}
for one change .popup.ia_popup to #thisPopupId
1 Like
I'm setting the color after looking at the data you sent, but by any chance, where should the pen name go and change the color?
thanks for telling me how
If I follow the method you told me, the close works, but the close color is bright, so I can't see it. I want to change the color to black. What part should I change?
You do that by configuration using the 
button. Run the view in Designer Preview mode, configure it and then save your project. Those settings then become the default.
Where do I need to fix this...?
I mean this part
I don't want to change the pen color, but I want to change the color of the table with the pen name.
Where is the place to put the code you're talking about?
also in the stylesheet