Themes in the new Next Experience UI are made up of UX Styles and UX Theme records. In order to style a theme, you first want to create the UX style record that contains the CSS properties you want to include in the theme. In our case we will just be changing the banner on the instance.
Navigate to sys_ux_style.list in the Application Navigator
Create a new record by filling out the following fields:
Name – whatever name you would like to give to the new style
Type – choose Core for a baseline style, Variant for a user selectable theme override.
Style – This is where you would enter the properties for the theme in a JSON format. In our example the below base values contain the overall style of the instance, while the properties value contains the override for the navigation banner
Create a UX Theme record by going to Now Experience Framework -> Theme Management -> Themes
Fill out the Name and Description fields and click save
On the Compositional: App Theme embedded list, add records for the following Core types, adding the OOB styles for Colors, Typography, U16 Dashboard Visualization Compatibility, Shape and Form. Add the custom style created in Step 2 at a higher order.
Now we have to set the custom theme as the theme the system will use. Go to the System Properties (sys_properties.list)
Add/edit the property glide.ui.polaris.theme.custom, setting the value field to the sys_id of the UX Theme record from Step 6. Reload the browser and you should see the custom theme in the instance UI.
(optional) Set a data preserver for the system property so it’s not cloned over.
Go to System Clone -> Clone Definition -> Preserve Data