The Next Experience UI comes with only 2 themes, unlike the classic UI.
Also, setting up a new theme is quite different compared to the classis UI.
Below are the simplified steps which you can use to create a brand new theme reflecting your organization brand.
- navigate to sys_ux_style
- create a new theme
- Set type as variant
- In the style section you need to define the base colors, and the properties. something like this:
{
"isDark": "false",
"base": {
"--now-color--neutral": "0, 51, 142",
"--now-color--primary": "57, 137, 47",
"--now-color--secondary": "57, 137, 47",
"--now-color_selection--primary": "0, 51, 142",
"--now-color_selection--secondary": "132,134,255",
"--now-color--interactive": "63,133,395",
"--now-color--link": "100,123,253",
"--now-color--focus": "100,123,253",
"--now-color_alert--critical": "219,53,72",
"--now-color_alert--high": "194,86,0",
"--now-color_alert--warning": "129,118,0",
"--now-color_alert--moderate": "123,86,255",
"--now-color_alert--info": "0,123,194",
"--now-color_alert--positive": "63,133,39",
"--now-color_alert--low": "113,118,129",
"--now-color_surface--brand": "132,134,255",
"--now-color_chrome--brand": "0, 51, 142",
"--now-color_chrome--divider": "0, 51, 142",
"--now-color_grouped--blue": "0,130,151",
"--now-color_grouped--brown": "167,104,21",
"--now-color_grouped--gray": "108,121,121",
"--now-color_grouped--green": "55,134,68",
"--now-color_grouped--green-yellow": "111,126,0",
"--now-color_grouped--magenta": "195,67,153",
"--now-color_grouped--orange": "202,77,52",
"--now-color_grouped--pink": "195,77,112",
"--now-color_grouped--purple": "162,77,221",
"--now-color_grouped--teal": "0,131,131",
"--now-color_grouped--yellow": "143,116,0",
"--now-color_text--primary": "0,51,142"
},
"properties": {
"--now-alert--critical--color": "--now-color_alert--critical-5",
"--now-unified-nav_header--background-color": "0, 51, 142",
"--now-unified-nav_header--text-color": "0,51,142",
"--now-alert--high--color": "--now-color_alert--high-5",
"--now-alert--info--color": "--now-color_alert--info-5",
"--now-alert--low--color": "--now-color_alert--low-5",
"--now-alert--moderate--color": "--now-color_alert--moderate-5",
"--now-alert--positive--color": "--now-color_alert--positive-5",
"--now-alert--warning--color": "--now-color_alert--warning-5",
"--now-breadcrumbs_dropdown--background-color--active": "--now-color--neutral-7",
"--now-breadcrumbs_dropdown--background-color--hover": "--now-color--neutral-7",
"--now-dropdown-list--background-color-alpha--focus": "1",
"--now-pill--color--selected": "--now-color_text--primary",
"--now-tooltip--border-width": "1px",
"--now-unified-nav_menu-subitem--color": "87, 193, 73",
"--now-unified-nav_favorite-icon--color": "255,219,146",
"--now-datavis_color_chart--primary": "--now-color--neutral-16",
"--now-datavis_color_chart--secondary": "--now-color--neutral-10",
"--now-datavis_color_chart--tertiary": "--now-color--neutral-8",
"--now-datavis_color_label--primary": "--now-color--neutral-0",
"--now-datavis_color_label--secondary": "--now-color--neutral-4",
"--now-datavis_color_label--tertiary": "--now-color--neutral-7",
"--now-datavis_color_layer--primary": "--now-color--neutral-10",
"--now-datavis_color_layer--quad": "--now-color--neutral-0",
"--now-datavis_color_layer--secondary": "--now-color--neutral-8",
"--now-datavis_color_layer--tertiary": "--now-color--neutral-6",
"--now-datavis_color--accessibility-0": "--now-color--neutral-20",
"--now-datavis_color--accessibility-2": "--now-color--neutral-14",
"--now-datavis_color--accessibility-10": "--now-color--neutral-0",
"--now-datavis_color--blue-0": "4,74,87",
"--now-datavis_color--blue-1": "5,96,113",
"--now-datavis_color--blue-2": "6,118,139",
"--now-datavis_color--blue-3": "8,140,165",
"--now-datavis_color--blue-4": "9,162,191",
"--now-datavis_color--blue-6": "49,195,223",
"--now-datavis_color--blue-7": "88,207,229",
"--now-datavis_color--blue-8": "128,218,235",
"--now-datavis_color--blue-9": "167,229,241",
"--now-datavis_color--blue-10": "206,241,247",
"--now-datavis_color--brown-0": "76,50,21",
"--now-datavis_color--brown-1": "99,65,28",
"--now-datavis_color--brown-2": "122,79,34",
"--now-datavis_color--brown-3": "145,94,40",
"--now-datavis_color--brown-4": "168,109,47",
"--now-datavis_color--brown-6": "201,145,85",
"--now-datavis_color--brown-7": "212,166,118",
"--now-datavis_color--brown-8": "222,187,150",
"--now-datavis_color--brown-9": "232,208,182",
"--now-datavis_color--brown-10": "242,229,215",
"--now-datavis_color--green-0": "0,61,10",
"--now-datavis_color--green-1": "0,80,13",
"--now-datavis_color--green-2": "0,98,16",
"--now-datavis_color--green-3": "0,116,19",
"--now-datavis_color--green-4": "0,135,22",
"--now-datavis_color--green-6": "41,169,62",
"--now-datavis_color--green-7": "82,186,99",
"--now-datavis_color--green-8": "122,202,135",
"--now-datavis_color--green-9": "163,218,172",
"--now-datavis_color--green-10": "204,235,209",
"--now-datavis_color--olive-0": "41,54,14",
"--now-datavis_color--olive-1": "53,70,18",
"--now-datavis_color--olive-2": "65,86,22",
"--now-datavis_color--olive-3": "78,102,27",
"--now-datavis_color--olive-4": "90,118,31",
"--now-datavis_color--olive-6": "127,153,70",
"--now-datavis_color--olive-7": "151,173,105",
"--now-datavis_color--olive-8": "175,192,141",
"--now-datavis_color--olive-9": "200,211,176",
"--now-datavis_color--olive-10": "224,231,211",
"--now-datavis_color--orange-0": "102,35,19",
"--now-datavis_color--orange-1": "133,45,25",
"--now-datavis_color--orange-2": "163,56,31",
"--now-datavis_color--orange-3": "194,66,37",
"--now-datavis_color--orange-4": "224,77,42",
"--now-datavis_color--orange-6": "255,114,81",
"--now-datavis_color--orange-7": "255,141,114",
"--now-datavis_color--orange-8": "255,168,147",
"--now-datavis_color--orange-9": "255,195,181",
"--now-datavis_color--orange-10": "255,221,214",
"--now-datavis_color--pink-0": "88,10,62",
"--now-datavis_color--pink-1": "114,13,81",
"--now-datavis_color--pink-2": "141,15,100",
"--now-datavis_color--pink-3": "167,18,119",
"--now-datavis_color--pink-4": "194,21,137",
"--now-datavis_color--pink-6": "226,61,172",
"--now-datavis_color--pink-7": "231,98,188",
"--now-datavis_color--pink-8": "237,135,204",
"--now-datavis_color--pink-9": "242,172,219",
"--now-datavis_color--pink-10": "248,209,235",
"--now-datavis_color--primary": "--now-color--neutral-20",
"--now-datavis_color--purple-0": "40,17,88",
"--now-datavis_color--purple-1": "52,22,114",
"--now-datavis_color--purple-2": "63,27,140",
"--now-datavis_color--purple-3": "75,32,166",
"--now-datavis_color--purple-4": "87,37,193",
"--now-datavis_color--purple-6": "124,76,225",
"--now-datavis_color--purple-7": "149,110,231",
"--now-datavis_color--purple-8": "174,144,236",
"--now-datavis_color--purple-9": "199,178,242",
"--now-datavis_color--purple-10": "224,212,248",
"--now-datavis_color--red-0": "89,21,44",
"--now-datavis_color--red-1": "115,27,57",
"--now-datavis_color--red-2": "142,33,70",
"--now-datavis_color--red-3": "169,40,83",
"--now-datavis_color--red-4": "195,46,96",
"--now-datavis_color--red-6": "227,85,132",
"--now-datavis_color--red-7": "233,117,156",
"--now-datavis_color--red-8": "238,149,179",
"--now-datavis_color--red-9": "243,182,202",
"--now-datavis_color--red-10": "248,214,226",
"--now-datavis_color--teal-0": "0,66,66",
"--now-datavis_color--teal-1": "0,86,86",
"--now-datavis_color--teal-2": "0,106,106",
"--now-datavis_color--teal-3": "0,126,126",
"--now-datavis_color--teal-4": "0,146,146",
"--now-datavis_color--teal-6": "41,180,180",
"--now-datavis_color--teal-7": "82,195,195",
"--now-datavis_color--teal-8": "122,209,209",
"--now-datavis_color--teal-9": "163,223,223",
"--now-datavis_color--teal-10": "204,237,237",
"--now-datavis_color--violet-0": "64,24,90",
"--now-datavis_color--violet-1": "83,32,117",
"--now-datavis_color--violet-2": "102,39,143",
"--now-datavis_color--violet-3": "121,46,170",
"--now-datavis_color--violet-4": "140,54,197",
"--now-datavis_color--violet-6": "174,92,229",
"--now-datavis_color--violet-7": "190,123,234",
"--now-datavis_color--violet-8": "205,154,239",
"--now-datavis_color--violet-9": "220,185,244",
"--now-datavis_color--violet-10": "236,216,249",
"--now-datavis_color--yellow-0": "102,69,0",
"--now-datavis_color--yellow-1": "133,89,0",
"--now-datavis_color--yellow-2": "163,110,0",
"--now-datavis_color--yellow-3": "194,131,0",
"--now-datavis_color--yellow-4": "224,151,0",
"--now-datavis_color--yellow-6": "255,185,41",
"--now-datavis_color--yellow-7": "255,199,82",
"--now-datavis_color--yellow-8": "255,212,122",
"--now-datavis_color--yellow-9": "255,225,163",
"--now-datavis_color--yellow-10": "255,238,204",
"--now-datavis_color--yellow-green-0": "67,79,8",
"--now-datavis_color--yellow-green-1": "87,103,11",
"--now-datavis_color--yellow-green-2": "107,127,13",
"--now-datavis_color--yellow-green-3": "127,151,16",
"--now-datavis_color--yellow-green-4": "147,174,19",
"--now-datavis_color--yellow-green-6": "181,207,58",
"--now-datavis_color--yellow-green-7": "195,216,96",
"--now-datavis_color--yellow-green-8": "209,225,133",
"--now-datavis_color--yellow-green-9": "223,235,171",
"--now-datavis_color--yellow-green-10": "237,244,208",
"--now-datavis_color--qualitative-0": "--now-datavis_color--blue-8",
"--now-datavis_color--qualitative-1": "--now-datavis_color--yellow-6",
"--now-datavis_color--qualitative-2": "--now-datavis_color--pink-7",
"--now-datavis_color--qualitative-3": "--now-datavis_color--green-7",
"--now-datavis_color--qualitative-4": "--now-datavis_color--violet-8",
"--now-datavis_color--qualitative-5": "--now-datavis_color--red-6",
"--now-datavis_color--qualitative-6": "--now-datavis_color--orange-8",
"--now-datavis_color--qualitative-7": "--now-datavis_color--purple-6",
"--now-datavis_color--qualitative-8": "--now-datavis_color--brown-8",
"--now-datavis_color--qualitative-9": "--now-datavis_color--teal-6",
"--now-datavis_color--qualitative-10": "--now-datavis_color--olive-8",
"--now-datavis_color--qualitative-11": "--now-datavis_color--blue-5",
"--now-datavis_color--qualitative-12": "--now-datavis_color--yellow-2",
"--now-datavis_color--qualitative-13": "--now-datavis_color--pink-5",
"--now-datavis_color--qualitative-14": "--now-datavis_color--green-8",
"--now-datavis_color--qualitative-15": "--now-datavis_color--violet-5",
"--now-datavis_color--qualitative-16": "--now-datavis_color--red-2",
"--now-datavis_color--qualitative-17": "--now-datavis_color--orange-5",
"--now-datavis_color--qualitative-18": "--now-datavis_color--purple-2",
"--now-datavis_color--qualitative-19": "--now-datavis_color--brown-5",
"--now-datavis_color--qualitative-20": "--now-datavis_color--teal-2",
"--now-datavis_color--qualitative-21": "--now-datavis_color--olive-5",
"--now-datavis_color--qualitative-22": "--now-datavis_color--blue-4",
"--now-datavis_color--qualitative-23": "--now-datavis_color--yellow-0",
"--now-datavis_color--qualitative-24": "--now-datavis_color--pink-4",
"--now-datavis_color--qualitative-25": "--now-datavis_color--green-0",
"--now-datavis_color--qualitative-26": "--now-datavis_color--violet-4",
"--now-datavis_color--qualitative-27": "--now-datavis_color--red-0",
"--now-datavis_color--qualitative-28": "--now-datavis_color--orange-4",
"--now-datavis_color--qualitative-29": "--now-datavis_color--purple-0",
"--now-datavis_color--qualitative-30": "--now-datavis_color--brown-4",
"--now-datavis_color--qualitative-31": "--now-datavis_color--teal-0",
"--now-datavis_color--qualitative-32": "--now-datavis_color--olive-4",
"--now-opacity--least": "0.2",
"--now-opacity--less": "0.35"
}
}
- Once this is added, you need to go the related list - UX Theme Styles and click on New
- Under theme set the value as polaris
- Leave the applicability field empty, and save the record.
Refresh the screen, and the new theme should be visible in the display options.
Attached are some theme samples that have been created.
