I have recently been working on changing branding and theming after San-Diego Upgrade. I know there are limited documents which is helpful but it did not work completely to me. I will talk about theme and how we can create our default custom theme without enabling dark theme through property ( glide.ui.polaris.dark_themes_enabled) and on top of this you can create multiple other theme which would be showing under preferences.
I have referred below article created by
If you navigate (Now Experience Framework > Theme Management > Themes), search 'polaris' and open this record. You will see multiple entry on Compositional: App Theme (just scroll a bit down), if you open any one of style (like colors, Shape and Form) there are entry in key-value pair, so we are going to create a new custom theme.
Step 1 - Navigate to Experience Framework > Theme Management > Themes . Click on New and give a name ( like New UI Theme) and save. Now scroll down a bit and come on 'Compositional: App Theme' and insert a record.
Click on search Icon and then create new style and select any name ( like New Color) and Type must be Core and submit, you will be now on previous page so just click on tick sign , once we have created our default custom theme then we have to use variant in Type for other theme.
Note: At starting i tried to use Color Generator but it did not work for me and my theme was not visual, so i will take you how to just use some specific key value on new created style to manage basic level of theming , even you can add more as per your requirement.
Now main part comes here, i will explain about basic key value pair minimal required for theme, here you go
"properties": {
"--now-unified-nav_button--color": "0,0,0",
"--now-unified-nav_header--background-color": "255,255,255",
"--now-unified-nav_button--color--active": "--now-unified-nav_header--background-color",
"--now-unified-nav_button--color--hover": "--now-unified-nav_header--background-color",
"--now-unified-nav_button--background-color": "--now-unified-nav_header--background-color",
"--now-unified-nav_button--background-color--hover": "0,0,255",
"--now-unified-nav_button--background-color--active": "--now-unified-nav_button--background-color--hover",
"--now-unified-nav_focus-ring--color": "--now-unified-nav_header--background-color",
"--now-unified-nav_contextual-app-pill--border-color": "--now-unified-nav_button--background-color--hover",
"--now-unified-nav_menu--border-color": "--now-unified-nav_header--background-color",
"--now-unified-nav_menu-divider-horizontal--color": "--now-unified-nav_header--background-color",
"--now-unified-nav_menu-divider-vertical--color": "--now-unified-nav_header--background-color",
"--now-unified-nav_menu-item--color": "--now-unified-nav_header--background-color",
"--now-unified-nav_menu--background-color": "--now-unified-nav_button--background-color--hover",
"--now-unified-nav_menu-subitem--color": "--now-unified-nav_header--background-color",
"--now-unified-nav_menu-item--color--hover": "--now-unified-nav_header--background-color",
"--now-unified-nav_menu-sublabel--color": "--now-unified-nav_menu-subitem--color",
"--now-unified-nav_menu-item--color--active": "--now-unified-nav_menu-item--color",
"--now-unified-nav_menu-button-iconic--color": "--now-unified-nav_header--background-color",
"--now-unified-nav_menu-button-iconic--background-color--hover": "--now-unified-nav_header--background-color",
"--now-unified-nav_menu-button-iconic--color--hover": "--now-unified-nav_button--background-color--hover",
"--now-unified-nav_menu-button-iconic--color--active": "--now-unified-nav_button--background-color--hover",
"--now-unified-nav_menu-button-iconic--background-color": "--now-unified-nav_header--background-color",
"--now-unified-nav_menu-button-iconic--background-color--active": "--now-unified-nav_button--background-color--hover",
"--now-unified-nav_menu-scrollbar--color": "--now-unified-nav_header--background-color",
"--now-unified-nav_favorite-icon--color": "161,161,47",
"--now-unified-nav_menu-filter--color": "--now-unified-nav_button--color",
"--now-unified-nav_menu-filter--background-color": "--now-unified-nav_header--background-color",
"--now-color_chrome--brand-4": "0,0,255",
"--now-unified-nav_header--color": "--now-color_chrome--brand-4"
}
you can page paste this on above created UX Color. Once you have done here the final part comes now
Step 2 - In Step-1, we created theme and a new style for that theme, now we will take sysid of created theme and use in the property (glide.ui.polaris.theme.custom), so copy sysid and
Navigate to System Property (sys_properties.list) , create New record like below and mention copied sysid .
waooooo!!! we are done and lets see the magic now
After following above what you will be on home screen sharing some screen shots-
Sh1-
Sh2-
I just wanted to share my experience as i expended more time to know about minimal effort to create multiple theme for organization as article are helpful and can not be followed same as per my experience. I am writing this article in hurry but i hope this will be useful to other users same like me.
Thanks!
