How do I modify the color for the heading in the new UI Builder page when using Portal App Shell

[Anil V]

I create a portal using the new UI builder and am trying to figure out how I can modify the color for the heading. 

My setup is as below

1. Created a new Experience with Portal App Shell and created a UX App Config for my new experience.

2. Created a theme and linked it to the new experience.

3. Created a page, with a component on it, I used Richtext component for my testing.

in the theme I added below, and was expecting bluish background for the header, but it didn't change color.

theme:

{
"--now-color_brand--primary" : "5,49,77"
}

Any Help is appreciated.

[Michael Fry1]

Here's how we did it. Inspect the runtime view on of your page. Then under Filter Styles find the entry that starts with "--now-" That should be the entry you have to make in your theme to control the color.

To test it, at the top of Filter Styles, find

element {
}

add the line between the brackets and change the color as needed. If it changes, then that's the theming hook you are looking for.

[Anil V]

Thanks Michael,

I can see that background color is coming from below css

background-color: RGB(var(--mv9-Jrmsr1-8trptZ-JvmzrAmtZ--krJUfZvWmp-JvjvZ,var(--now-color_background--primary,var(--now-color--neutral-0,255,255,255))));

only issue is , if I set the color value for the "--now-color_background--primary" variable, it sets the background to the whole page.

I do see this variable "--mv9-Jrmsr1-8trptZ-JvmzrAmtZ--krJUfZvWmp-JvjvZ" in the above css, but don't know if I can rely on it or not.

[Michael Fry1]

If --mv9-Jrmsr1-8trptZ-JvmzrAmtZ--krJUfZvWmp-JvjvZ

Try using: --now-canvas-header-container--background-color

[Anil V]

Thanks Michael, but that didn't help either. Out of curiosity, How did you come up with --now-canvas-header-container--background-color. 

I reached out to HI, waiting to see what they suggest.