Appearance-Aware Properties

Some properties allow you to set values specific to the browser’s appearance mode, such as light mode or dark mode, in addition to the default value.
You can configure these by clicking the [+] icon at the bottom right of the setting item in the property dialog.
This feature was added in v4.1.0.

Setting via the Property Dialog

You can set values for light mode or dark mode from the property dialog using the following steps:

1. Click the [+] button at the bottom right of a property item that supports appearance mode settings.
2. Select [Light] or [Dark].
3. An input field for the selected mode will appear. Enter the value in that field.
4. Click [Apply].

Getting and Setting via Actions

When getting or setting appearance mode property values in actions, use the following syntax:

Getting values in actions

Syntax	Result
const x = $ui.{componentID}.{propertyName}	The value currently displayed on the screen is stored in x.
const y = $ui.{componentID}.{propertyName}Appearances.light	The property value set for light mode is stored in y.
const z = $ui.{componentID}.{propertyName}Appearances.dark	The property value set for dark mode is stored in z.

Example:

const x = $ui.table.evenBackgroundColor;
const y = $ui.table.evenBackgroundColorAppearances.light;
const z = $ui.table.evenBackgroundColorAppearances.dark;

Setting values in actions

Syntax	Result
$ui.{componentID}.{propertyName} = 'xxx'	’xxx’ is set as the default property value.
$ui.{componentID}.{propertyName}Appearances.light = 'yyy'	’yyy’ is set as the light mode property value.
$ui.{componentID}.{propertyName}Appearances.dark = 'zzz'	’zzz’ is set as the dark mode property value.

Example:

$ui.table.evenBackgroundColor = 'xxx';
$ui.table.evenBackgroundColorAppearances.light = 'yyy';
$ui.table.evenBackgroundColorAppearances.dark = 'zzz';