外観モード対応プロパティ

一部のプロパティでは、デフォルト値に加え、ライトモードやダークモードなどブラウザの外観モードに応じた値を個別に設定できます。
プロパティダイアログから設定項目の右下にある[＋]アイコンをクリックして設定することが出来ます。
v4.1.0で追加された機能です。

プロパティダイアログでの設定方法

プロパティダイアログから以下の手順でライトモードまたはダークモードに応じた値を設定することが出来ます。

1. 外観モード設定に対応したプロパティ項目の右下の[＋]をクリックする。
2. [ライト]または[ダーク]を選択する。
3. 選択した言語に対応した項目が表示され、その項目に値を設定する。
4. [適用]をクリックする。

アクションでの取得および設定方法

外観モード対応プロパティの値をアクションで取得または設定する場合は、以下のように記述する必要があります。

アクションでの取得

記法	結果
const x = $ui.{コンポーネントID}.{プロパティ名}	xに画面に表示されている値が格納される。
const y = $ui.{コンポーネントID}.{プロパティ名}Appearances.light	yにライトモード用に設定したプロパティ値が格納される。
const z = $ui.{コンポーネントID}.{プロパティ名}Appearances.dark	zにダークモード用に設定したプロパティ値が格納される。

例）

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

アクションでの設定

記法	結果
$ui.{コンポーネントID}.{プロパティ名} = 'xxx'	デフォルトのプロパティ値に’xxx’が設定される。
$ui.{コンポーネントID}.{プロパティ名}Appearances.light = 'yyy'	ライトモード用のプロパティ値に’yyy’が設定される。
$ui.{コンポーネントID}.{プロパティ名}Appearances.dark = 'zzz'	ダークモード用のプロパティ値に’zzz’が設定される。

例）

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