Problems with Theme modifications

Products

• CA Performance Management - Usage and Administration
• DX NetOps

Issue/Introduction

We have problems with creating custom themes. In the past (21.x.y or early 22.2.y releases) this was working flawlessly but not with the newest releases.

Changing the colors of icons in svg files works like expected, but if we change the colors (for example for the top bar) in css it gets overridden after fully loading the page (the capc.css in the css folder [not in the theme] is finally used).

Its the same problem if we use the CA-White theme or CA-Blue theme as base. If you just copy the CA-Blue Theme and rename it to T-Blue-Theme, the dark blue header bar is gone and it has the same color as the CA-White header bar.
If we modify the CA-White Theme directly, it gets overriden by capc.css too 

Environment

Release : 22.2.5

Cause

Additional steps required in 22.2.5

Resolution

So there's one additional thing you have to start editing in capc_theme.css files.   Near the top of the file there's a section that looks like this:

:root {
    --action-main-channel: 0 0 0;
    --palette-action-active: rgba(var(--action-main-channel)/var(--mnrl-color-action-activated-opacity));
    --palette-action-disabled: rgba(var(--action-main-channel)/var(--mnrl-color-action-disabled-opacity));
    --palette-action-disabled-background: rgba(var(--action-main-channel)/var(--mnrl-color-action-disabled-background-opacity));
    --palette-action-focus: rgba(var(--action-main-channel)/var(--mnrl-color-action-focus-opacity));
    --palette-action-hover: rgba(var(--action-main-channel)/var(--mnrl-color-action-hover-opacity));
    --palette-action-selected: rgba(var(--action-main-channel)/var(--mnrl-color-action-selected-opacity));
    --palette-primary-main: var(--mnrl-palette-slate-600);
    --palette-primary-dark: var(--mnrl-palette-slate-700);
    --palette-primary-light: var(--mnrl-palette-slate-500);
    --palette-text-primary: var(--mnrl-color-text-primary);
    --palette-grey-50: var(--mnrl-palette-gray-50)
}

You need to edit and replace the var(--mnrl-palette...) references with colors.  

So to make the header be "magenta" instead of slate-600, you need to replace var(--mnrl-palete-slate-600) with #E20074.