Next Experience UI Theme/Style assistance

[jMarshal]

Hello all -- I am trying to do some theme building for Next Experience UI and I'm wondering if anyone can provide information about what to put in the UX Style record to adjust the color of the banner along the top of the screen, when a form or list is displayed...?

This is not the Navigation Menu at the very top of the screen, which I am referring to -- but rather, the light grey bar that appears directly under that...see screenshot below:

I am looking for something like this (snipped):

"isDark": "true", "base": { "--now-color--neutral": "0, 0, 0", "--now-color--primary": "255, 111, 0", ...

...but don't know what will reference the section/part I am looking for (primary, focus, button, header, etc...?)

I am not a designer, so pardon my novice approach, I may not be effectively communicating what I am looking for -- referring to a "banner", "thing", etc...

Bonus question - when I do not include "isDark true" the entire background of individual pages/records changes to a lighter grey colour...this makes sense, but I am wondering what/how/where I may adjust the "normal/default" background colour, so that it doesn't need to be considered "isDark", but rather just a "part of" the theme...again, inexperienced in UX, so it may be a silly question?

[Mike_R]

Have you tried using theme builder?
Create a theme with Theme Builder (servicenow.com)

[jMarshal]

yes, I have...but I'm still having trouble as none of the configurations in theme builder have changed that colour/banner/spot.

I am also trying to set this as a style (variant?), rather than an actual theme -- I'd like to keep the default (Polaris) theme if possible and simply apply a variant with specific colours, etc.

I went into the custom theme I made with Theme Builder to inspect the data in the "Colors UX Theme Style" record to see if I can get the info I'm looking for, but see nothing about setting the colour for the spot I desire

[cori10]

hey there! in case you're still looking for an answer to this, you can change this in a UX Style by setting the --now-color_surface--neutral-3 variable. for example:

{
    "isDark": "false",
	"base":{
        "--now-color--custom": "204,245,100"
    },
    "properties": {
        "--now-color_surface--neutral-3": "--now-color--custom"
    }
}

looks like this:

in general, your best bet if you're looking for what property/variable name to change is to inspect that section of the page in Chrome, going to the Computed section (in the bottom pane), and clicking the arrow to the left of the color you want to change. it should then jump to the relevant line in the platform CSS that shows what variable is being used for that color. hope this helps!

[Chris D]

You are correct here but I just want to add that this really isn't the best design solution... but unfortunately as far as I can tell, it may be the only one since it doesn't seem readily doable to apply custom CSS and/or modify ootb classes...?

Manually overriding a CSS variable means that every instance of it will be changed - but the lucky thing in this case it seems is that --now-color_surface--neutral-3 does not seem to be used anywhere except that menu bar.

Here's another reason it's a bad design: let's say you change that background-color to dark red... well, that (text) color is defined as --now-color_text--primary which is likely going to be black (in a non-dark theme) so now you can't read it... unless you change --now-color_text--primary... but now changing that will change text across the platform which will undoubtedly mess up lots of other things where the system is expecting a (light) neutral background with dark text. On the chance that --now-color_surface--neutral-3 was used elsewhere in the system, that'd change those uses as well.

Here's a good example of where this - modifying a (coincidentally neutral) variable is problematic: How to Modify Specific Page Element CSS - ServiceNow Community