- In order switch images automatically when you switch theme from user preferences, you need to use Custom Illustration component.
- In this article, I will guide you through a step by step process on how to configure the style variables in different themes available in your instance & on how to use Custom Illustration component.
- In this example, we will consider
- 2 themes (Polaris & Coral) from 'sys_ux_theme' table
- 3 images (polaris-banner.svg, coral-banner.svg, default-banner.svg) from 'db_image' table
💡 The idea is to have a variable with same name but different image paths in Style variables of each theme.
Step - 1: Create a token for 'polaris-banner.svg' in Polaris theme
- All -> Now Experience Framework -> Themes.
- Open 'Polaris' theme record.
- Under 'Compositional App Theme' related records, locate Style with name - 'Imagery' & Open that record.
- In "Style" field, add one more variable with name '--now-illustration-custom-application-banner-path' in properties.
- The value for that property should be the 'Name' value for 'polaris-banner.svg' record from db_image table.
- Whatever text remains after excluding the starting string '--now-illustration-custom-' becomes the token for the image.
Step-2: Use Custom illustration component in UIB page
Pre-work: I have created a sample page, with application title & some info message at the top with placeholder for image at the right. We will now add Custom Illustration component to have a banner feel
- Add Custom Illustration component inside Header container beside Title & Info container.
- For 'SVG image source' give the value 'default-banner.svg'.
- This will be the backup image incase the Custom Illustration component is not able to find image/asset with passed token.
- Give some hardcoded Width & Height values in pixels for now.
- Preview the page in new tab and see the result. You will observe something similar to below
- Now come back to UIB page, Select Custom Illustration component & edit the 'Token Id' field - Give the value from Step-1 i.e `application-banner-path` & Save the changes.
- Preview the page in new tab and see the result once again. You will observe something similar to below
Step-3: Check the result by switching between Coral & Polaris Themes
- The interesting thing here is that since we added the "Token Id" only in Polaris theme, when we switch to Coral theme we will see the 'default-banner.svg'
