DEV Community

Thom
Thom

Posted on

Create a Theme variant for your configurable Workspace

The following tutorial should help you create your own theme variant that is used for your hole instance including your configurable workspace.

If we go in the UI Builder to the experience settings and then to Branding and theming we can see that the Polaris theme is locked in and can't be changed.

Image description

There is two approaches. We could create our own Theme and then create a sys_property called 'glide.ui.polaris.theme.custom' and add the sysId of the theme or just add a variant to our polaris theme (I'm creating a variant in this example).

To generate a full color theme, I'm using the color generator here: https://theme.deoprototypes.com/color-generator-p/
Click on the 'Auto Generate' button on the top right and add three color as brand neutral, primary and secondary.

If you generated your color theme, you can copy the JSON with the button 'copy JSON' on the top right. There is also a 'Dark' toggle if you fancy a dark theme.

Image description

If you want to create a Variant to the polaris Theme:

  1. Go to the table 'sys_ux_style'
  2. Add a new record with type 'Variant'
  3. Use the following structure:
{
    "properties": Here you can copy the JSON from the color generator
}
Enter fullscreen mode Exit fullscreen mode
  1. Copy the JSON in to the structure
  2. Add in the related List 'UX Theme Styles' your variant to the polaris Theme.

Image description

Image description

Now you can select your variant via the user preferences --> Theme

Image description

If you want to add a logo to your theme variant you need to add a UX Style Asset (related list). In the Asset reference field, you need to add a new UX theme asset with the category 'image'. The logo you can just add as an attachment to that record. Important, in the UX Style asset 'Asset Properties' field you need to add following JSON:
{ "position": "header_logo" }

Thats all there is, have fun! :)

Top comments (0)