Adjusting semantic message background colors in UI Theme Designer

Introduction

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.

Problem description

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:

• sapErrorBackground
• sapInformationBackground
• sapSuccessBackground
• sapWarningBackground

Now you can use these parameters to adjust the background color of the message to your needs, as shown in the following example:

Conclusion

You are now able to edit background colors indicating different states like “Error”, “Information”, “Success” and “Warning”.