Show TOC

Customizing the Color Scheme for Portal on DeviceLocate this document in the navigation structure

Use

The mobile framework pages come with a palette.less file that enables you to easily change the color scheme of your on-device portal. The palette file is based on a minimal set of base colors:

  • main-color

  • secondary-color

  • accent-color

Most of the other colors in the palette are derived from the base colors, using functions such as lighten or darken to define additional colors and shades that are used in the color scheme. In the following example, the color main-color1 is lighter than the base color main-color by 14.5 percent:

Sample Code 
               @main-color1:   lighten(@main-color,  14.5%);

The configuration of the out-of-the-box colors in the palette.less file starts from dark base colors, and uses less functions to derive lighter colors. Thus, main-color is black, and secondary-color is white.

To configure the palette starting from light base colors, define a light color for main-color and a dark color for secondary-color . You must also reverse the functions in the palette.less file from darken to lighten , and vice versa.

Customizing the Palette.less File

To quickly change the color scheme of your mobile framework, we recommend that you only change the values of the base colors, as required by your company branding.

However, in some cases you may also need to change other colors in the palette. For an explanation of which UI elements are affected by changing each of the color variables, see SAP Note 1705067 Information published on SAP site.

The following table describes the different sections in the palette.less file, and provides guidelines for modifying the colors in each section:

Section

Description

Modify?

Base Colors

The base colors from which most of the other palette colors are derived.

Yes

Background Colors

Background colors.

Only if necessary, as a result of changing background images.

Font Type

Font type.

Only if necessary to use a different font.

Color Operations

Colors derived from the base colors.

Includes definitions for font colors.

Reverse functions ( darken to lighten and vice versa) only if you need to define your color scheme from lighter colors to darker colors.

Additional Colors

Additional colors, which are not derived from the base colors, used for shadows and backgrounds.

Reverse functions ( darken to lighten and vice versa) only if you need to define your color scheme from lighter colors to darker colors.

Gradient Operations

Defines sets of colors used for gradients.

No
More Information