Show TOC

Understanding the palette.less FileLocate this document in the navigation structure

Use

Enterprise workspaces come with a palette.less file that enables you to easily change the color scheme of the HTML UI elements in enterprise workspaces by modifying specific color variable values in a single file.

The palette.less file is based on a minimal set of base colors for enterprise workspaces on device, mobile homepage, and enterprise workspaces on desktop.

Most of the other color definitions 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 desktop-main-color2 is lighter than the base color desktop-main-color by 25 percent:

@desktop-main-color2 : lighten(@desktop-main-color, 25%);

The palette.less file is divided into different sections, according to where the listed colors are used in enterprise workspaces. The palette.less file includes a description for each group of color variables, to assist you when modifying colors.

To quickly change the color scheme of your enterprise workspaces HTML UI elements, we recommend that you change only 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 exactly which UI elements are affected by changing each of the color variables, see SAP Note 1727266 Information published on SAP site.

Note

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-shell-color, main-content-color, and desktop-main-color are black, and secondary-shell-color, secondary-content-color, and desktop-secondary-color are white.

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

For more information, see Branding Enterprise Workspaces - HTML Styles.