Adjusting semantic message background colors in UI Theme Designer
When you create a custom theme using the UI Theme Designer it can happen, that the message background color of the input field turns white, which can result in bad contrast to its surrounding elements. In the following blog post I will explain how SAP solved this issue.
The background of the message “Invalid entry”, that appears when you click the input field, turns white when a semantic color is changed to a lighter tone:
Root cause of the issue
The cause for this issue is that the message background color is calculated using the chosen semantic color and a function that lightens it.
How to solve the issue
SAP has un-protected four semantic background color parameters so you can edit them separately in Expert theming mode which are:
Now you can use these parameters to adjust the background color of the message to your needs, as shown in the following example:
You are now able to edit background colors indicating different states like “Error”, “Information”, “Success” and “Warning”.