Color Theme

Theme settings allow you to set the colors used in the application. Select "Color Theme" from the Application Settings in the side menu.

Color theme

The elements for which colors can be set and their default values are as follows:

App Appearance Mode

This feature was added in v4.1.0.
You can select the application appearance mode from the following options:

• Light
• Dark
• Auto

Note

• When "Auto" is selected, the appearance mode follows the browser’s appearance mode setting.
• Color theme values can be configured separately for each appearance mode.
• You can switch the target appearance mode using the icon in the upper right corner of each editing table.

Component

Color	Main	Light	Dark	Contrast
Primary	#1976d2	#42a5f5	#1565c0	#FFFFFF
Secondary	#9c27b0	#ba68c8	#7b1fa2	#FFFFFF
Error	#d32f2f	#ef5350	#c62828	#FFFFFF
Warning	#ed6c02	#ff9800	#e65100	#FFFFFF
Info	#0288d1	#03a9f4	#01579b	#FFFFFF
Success	#2e7d32	#4caf50	#1b5e20	#FFFFFF

Text

Text	Main
Primary	#000000DE
Secondary	#00000099
Disabled	#00000061

Note

Text color settings will be applied to the component "Typography" and can be specified. Primary will be the default color.

Background

Properties	Value
Background Default	#FFFFFF
Background Paper	#FFFFFF

Note

Background properties and values apply as follows:

• Property "Background Default"
  • Applied to the canvas and becomes the default background color and body color.
• Property "Background Paper"
  • Applied to the canvas and can be specified using the background color and body color.
  • Applied to the background color of the component "Basic List".
  • Applied to the background color of the component "Detail List".
  • Applied to the background color of the component "Stepper".
  • Applied to the background color of the component "Tab".

Divider

Properties	Value
Divider	#DDDDDD