アイコン UI セクションの色変数のサポート

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：3分

    • 色変数を使用してモバイルアイコン UI セクションのテーマを変更する方法について説明します。

    アイコン UI セクションには、要素の前景色と背景色を制御する 2 つのフィールドを持つ [色 ] セクションがあります。

    • 背景色変数
    • フォアグラウンド色変数
    これらの 2 つのフィールドは、次のテーブルにあります。
    • アイコンセクション宛先ランチャー [sys_sg_navigation_section_destination_applet_launcher]
    • アイコンセクション宛先機能 [sys_sg_navigation_section_destination_button]
    • アイコンセクション宛先画面 [sys_sg_navigation_section_destination_screen]

    これらのアクションの作成の詳細については、「 アイコン UI セクションの構成」を参照してください。

    UX テーマプロパティ [sys_ux_theme_property] テーブルから任意の色変数を定義できます。利用可能な変数のリストについては、以下のカラーデザインガイドを参照してください。

    		 アイコン UI セクションで使用される色変数

    モバイルアイコン UI セクションのカラーガイド

    色変数は次のように分類されます。 デザインガイドラインを使用して、ユースケースに適した色変数を特定します。

    アラートカラーパレット
    アラートカラーパレットの色は、重要なステータス、状況、およびタスクをハイライト表示します。アラートの色は、装飾や整理のためではなく、特定の意味を伝えるために使用します。
    グループ化されたカラーパレット
    グループ化されたカラーパレットの色は、業界の色規則に従います。これらの色を使用して、色付きのアイテムが特定の業界または基幹業務に関連付けられていることを示します。各色の意味はコンテキストによって異なりますが、アプリ内で一貫性を保つ必要があります。

    アラートカラーパレット

    色名 Color 例 色オプション
    プライマリ プライマリアイコン色 プライマリアイコンの例
    モバイル変数
    primary
    Web 変数
    --now-color--primary-1
    重大 重大アイコンの色 重大アイコンの例
    モバイル変数
    アラート--重大-2
    Web 変数
    --now-color_alert--critical-2
    高 高アイコンの色 高アイコンの例
    モバイル変数
    alert--high-2
    Web 変数
    --now-color_alert--high-2
    Warning 警告アイコンの色 警告アイコンの例
    モバイル変数
    alert--warning-2
    Web 変数
    --now-color_alert--warning-2
    中 中アイコンの色 中アイコンの例
    モバイル変数
    アラート--moderate-2
    Web 変数
    --now-color_alert--moderate-2
    Info 情報アイコンの色 情報アイコンの例
    モバイル変数
    alert--info-2
    Web 変数
    --now-color_alert--info-2
    陽性 正のアイコン色 ポジティブアイコンの例
    モバイル変数
    alert--positive-2
    Web 変数
    --now-color_alert--positive-2
    低 低アイコンの色 低アイコンの例
    モバイル変数
    alert--low-2
    Web 変数
    --now-color_alert--low-2

    グループ化されたカラーパレット

    色名 Color 例 色オプション
    青 青いアイコンの色 青いアイコンの例
    Web 変数
    --now-color_grouped--blue-2
    茶色 茶色のアイコン色
    Web 変数
    --now-color_grouped--brown-2
    グレイ 灰色のアイコン色 グレーのアイコンの例
    Web 変数
    --now-color_grouped--gray-2
    緑 緑のアイコン色 緑のアイコンの例
    Web 変数
    --now-color_grouped--green-2
    緑黄 緑黄のアイコン色 緑黄アイコンの例
    Web 変数
    --now-color_grouped--green-yellow-2
    マゼンタ マゼンタアイコンの色 マゼンタアイコンの例
    Web 変数
    --now-color_grouped--magenta-2
    オレンジ オレンジ色のアイコン色 オレンジ色のアイコンの例
    Web 変数
    --now-color_grouped--orange-2
    ピンク ピンクのアイコン色 ピンクのアイコンの例
    Web 変数
    --now-color_grouped--pink-2
    紫 紫色のアイコン色 紫色のアイコンの例
    Web 変数
    --now-color_grouped--紫-2
    青緑 青緑アイコンの色 青緑アイコンの例
    Web 変数
    --now-color_grouped--teal-2
    黄 黄色のアイコン色 黄色のアイコンの例
    Web 変数
    --now-color_grouped--yellow-2