How to change the text color in my portal in APP Engine Studio?

[Jaya Srivastava]

Hello All,

I want to change the color of the text that I have used in the headings and buttons used in my portal in app engine studio. I have tried using CSS styles in App Engine Studio but its not working. Is that something to do with themes which I am using in my experience of portal in app engine studio. If yes, then please provide the steps to do so. Also, I want to change the color of header in my portal. How to do so? I have attached the screen shot of the same.

[Vasantharajan N]

Step 1: Edit the experience in App Engine Studio that opens up UI Builder

Step 2: in UI builder Click Menu > Edit Experience settings

Step 3: You can update Branding & Theming, Navigations and Menus

[Jaya Srivastava]

Hello @Vasantharajan N ,

I am facing problem in the syntax of themes for header color and  text color(as I am new to it). I am creating a new theme. Plz tell the syntax to change header color and the text color. Right now I have given the following syntax:

{
    "--now-line-height-crop--before": "-0.25em",
    "navigation--font-weight": "600",
    "catalog--variable-gap": "1.5rem",
    "button--width-scale" : "1.25",
    "--now-button--bare_primary--color": "1,119,142",
    "--now-button--bare_primary--color--hover": "1,89,107",
    "--now-button--bare_primary--color--active": "1,60,71",
    "color--neutral-0": "255,255,255",
    "color--neutral-1": "246,247,247",
    "color--neutral-2": "228,230,231",
    "color--neutral-3": "209,214,214",
    "color--neutral-4": "191,197,198",
    "color--neutral-5": "172,180,181",
    "color--neutral-6": "154,164,165",
    "color--neutral-7": "135,147,148",
    "color--neutral-8": "117,130,132",
    "color--neutral-9": "99,114,116",
    "color--neutral-10": "80,97,99",
    "color--neutral-11": "73,88,90",
    "color--neutral-12": "66,80,81",
    "color--neutral-13": "58,71,72",
    "color--neutral-14": "51,62,63",
    "color--neutral-15": "44,53,55",
    "color--neutral-16": "37,45,46",
    "color--neutral-17": "30,36,37",
    "color--neutral-18": "22,27,28",
    "color--neutral-19": "15,18,19",
    "color--neutral-20": "8,10,10",
    "color--neutral-21": "0,0,0",
    "color--background-primary": "255,255,255",
    "color--background-secondary": "246,247,247",
    "color--background-tertiary": "228,230,231",
    "color--divider-primary": "135,147,148",
    "color--divider-secondary": "172,180,181",
    "color--divider-tertiary": "209,214,214",
    "color--text-primary": "22,27,28",
    "color--text-secondary": "66,80,81",
    "color--text-tertiary": "99,114,116",
    "tabs--border-color": "172,180,181",
    "tabs--background-color": "255,255,255",
    "--now-tabs--selected--background-color": "1,119,142",
    "--now-tabs--color--selected": "1,119,142",
    "--now-color--secondary-0": "230,251,255",
    "canvas-header-container--background-color": "var(--now-color--primary-3)",
    "canvas-nav-item--simple-nav--color": "var(--now-color--neutral-4)",
    "canvas-nav-item--simple-nav--color--hover": "var(--now-color--neutral-4)",
    "canvas-nav-item--simple-nav--color--active": "var(--now-color--neutral-4)",
    "canvas-nav-item--simple-nav--background-color--hover": "var(--now-color--primary-1)",
    "popover--border-radius": "0.75rem"
}

But I do not know which syntax does what so just wanted to know the syntax for changing the above mentioned things.

[Vasantharajan N]

Please refer to the docs link below where you can see more detailed information with screenshot about theme 

https://docs.servicenow.com/en-US/bundle/tokyo-application-development/page/administer/ui-builder/task/create-theme.html

After going through the docs still if you need support, Please post message here.

[Jaya Srivastava]

Hello @Vasantharajan N,

Thankyou for sharing the doc, it is helpful.

I tried with the code snippet given in the doc u shared. The color of the buttons and navigation menu changed but the text colors are not changing, its changing only the background color of the navigation menu and button. I want to change the text color. The screen shot of the same I have attached. The code snippet I used for the theme is as follows:

{
  "--now-color_brand--primary": "1,169,130",
  "--now-color--primary-1": "1,169,130",
  "--now-color--primary-0": "1,169,130",
  "--now-color--primary-2": "1,169,130",
  "--now-color--primary-3": "1,169,130",
  "--now-color_brand--secondary": "0,0,0",
  "--now-color--secondary-1": "255,255,255",
  "--now-color--secondary-0": "255,255,255",
  "--now-color--secondary-2": "255,255,255",
  "--now-color--secondary-3": "255,255,255",
   "color--text-primary": "255,255,255"
}