--- sourceDocument: Xanadu モバイルの構成とナビゲーション sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/xanadu/mobile Release : - xanadu ft:locale : - ja-JP ft:publication_title : - Xanadu モバイルの構成とナビゲーション ft:clusterId : - mobile bundleId : - mobile workflow : - Platform --- # UI ルールの色変数のサポート # UI ルールの色変数のサポート {#ariaid-title1} * リリースバージョン: Xanadu * * 更新日 2024年08月01日 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：4分 色変数を使用してモバイル UI ルールのテーマを変更する方法について説明します。 |-|-| | UI ルールの \[値\] フィールドで次の色変数を使用し、\[操作\] フィールドを \[UI スタイルを設定\] に設定します * `背景色の変数` * `TextDecorator` の外部または内部の `FontColorVariable` {#color-var-ui-rule__ul_nnz_533_ywb} UX テーマプロパティ \[sys_ux_theme_property\] テーブルから任意の色変数を定義できます。使用可能な変数のリストについては、以下のカラーデザインガイドを参照してください。例： `{"BackgroundColorVariable": "--now-color-secondary-3", "BackgroundColor": "#3f2c11"}` これらの UI ルールアクションの作成の詳細については、「 [モバイル UI のルールアクションの作成](https://servicenow-prod.fluidtopics.net/85yW_rdpI5mf0XmIZbYy7w "モバイル UI のルールの条件が満たされたときに実行するアクションを作成します。")」を参照してください。 | | [ ] {#color-var-ui-rule__table_fbp_nfb_yvb} ## モバイル UI のルールカラーガイド {#color-var-ui-rule__section_vvh_wzp_1xb} 色変数は次のように分類されます。 設計ガイドラインを使用して、ユースケースに適した色変数を識別します。 アラートカラーパレット : アラートカラーパレットの色は、重要なステータス、状況、およびタスクを強調表示します。アラートの色は、装飾や整理のためではなく、特定の意味を伝えるために使用します。 グループ化されたカラーパレット : グループ化されたカラーパレットの色は、業種の色規則に従います。これらの色を使用して、色付きのアイテムが特定の業界または基幹業務に関連付けられていることを示します。各色の意味はコンテキストによって異なりますが、アプリ内では一貫している必要があります。 {#color-var-ui-rule__table_otd_c1q_1xb__entry__3} | 色名 | 例 | カラー変数 | |-|-|-| | 重大 | | モバイル変数 : `alert--critical-0` Web 変数 : `--now-color_alert--critical-0` | | 高 | | モバイル変数 : `alert--high-0` Web 変数 : `--now-color_alert--high-0` | | 訓告 | | モバイル変数 : `alert--warning-0` Web 変数 : `--now-color_alert--warning-0` | | 中 | | モバイル変数 : `alert--moderate-0` Web 変数 : `--now-color_alert--moderate-0` | | 情報 | | モバイル変数 : `alert--info-0` Web 変数 : `--now-color_alert--info-0` | | 好意的 | | モバイル変数 : `alert--positive-0` Web 変数 : `--now-color_alert--positive-0` | | 低 | | モバイル変数 : `alert--low-0` Web 変数 : `--now-color_alert--low-0` | | 無効 | ![無効なアラートのカラースキーム]() | モバイル変数 : `alert-disabled-background` Web 変数 : `--now-color_background--secondary` | | 重大 (代替) | ![重大アラートのカラースキーム (代替)]() | モバイル変数 : `alert--critical-4` Web 変数 : `--now-color_alert--critical-4` | | 高 (代替) | ![高アラートのカラースキーム (交互)]() | モバイル変数 : `alert--high-4` Web 変数 : `--now-color_alert--high-4` | | 警告 (代替) | ![警告アラートのカラースキーム (代替)]() | モバイル変数 : `alert--warning-4` Web 変数 : `--now-color_alert--warning-4` | | 中 (代替) | ![中アラートのカラースキーム (代替)]() | モバイル変数 : `alert--moderate-4` Web 変数 : `--now-color_alert--moderate-4` | | 情報 (代替) | ![情報アラートのカラースキーム (代替)]() | モバイル変数 : `alert--info-4` Web 変数 : `--now-color_alert--info-4` | | 正 (代替) | ![正のアラートのカラースキーム (代替)]() | モバイル変数 : `alert--positive-4` Web 変数 : `--now-color_alert--positive-4` | | 低 (代替) | ![低アラートのカラースキーム (代替)]() | モバイル変数 : `alert--low-4` Web 変数 : `--now-color_alert--low-4` | | 無効 (代替) | ![無効なアラートのカラースキーム (代替)]() | モバイル変数 : `alert-disabled-text` Web 変数 : `--now-color_text--ターシャリ` | [表 : 1. アラートカラーパレット] {#color-var-ui-rule__table_otd_c1q_1xb} {#color-var-ui-rule__table_f5d_c1q_1xb__entry__3} | 色名 | 例 | カラーバリエーション | |-|-|-| | 青 | ![青色のグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--blue-0` | | 茶色 | ![茶色のグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--brown-0` | | グレイ | ![グレーのグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--gray-0` | | 緑 | ![緑のグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--green-0` | | 緑黄 | ![緑黄のグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--green-yellow-0` | | マゼンタ | ![マゼンタのグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--magenta-0` | | オレンジ | ![オレンジ色のグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--orange-0` | | ピンク | ![ピンクのグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--pink-0` | | 紫 | ![紫のグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--紫-0` | | 青緑 | ![青緑色のグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--teal-0` | | 黄 | ![黄色のグループ化されたカラースキーム]() | Web 変数 : `--now-color_grouped--yellow-0` | | 青 (代替) | ![青色のグループ化された配色 (交互)]() | Web 変数 : `--now-color_grouped--blue-4` | | 茶色 (代替) | ![茶色のグループ化された配色 (交互)]() | Web 変数 : `--now-color_grouped--brown-4` | | グレー (代替) | ![グレーのグループ化された配色 (代替)]() | Web 変数 : `--now-color_grouped--gray-4` | | 緑 (代替) | ![緑のグループ化された配色 (交互)]() | Web 変数 : `--now-color_grouped--green-4` | | 緑黄 (交互) | ![緑黄グループ化カラースキーム (交互)]() | Web 変数 : `--now-color_grouped--green-yellow-4` | | マゼンタ (代替) | ![マゼンタのグループ化されたカラースキーム (交互)]() | Web 変数 : `--now-color_grouped--magenta-4` | | オレンジ (代替) | ![オレンジ色のグループ化されたカラースキーム (代替)]() | Web 変数 : `--now-color_grouped--orange-4` | | ピンク (代替) | ![ピンクのグループ化されたカラースキーム (代替)]() | Web 変数 : `--now-color_grouped--pink-4` | | 紫 (代替) | ![紫のグループ化されたカラースキーム (交互)]() | Web 変数 : `--now-color_grouped--紫-4` | | 青緑 (代替) | ![青緑色のグループ化されたカラースキーム (交互)]() | Web 変数 : `--now-color_grouped--teal-4` | | 黄 (代替) | ![黄色のグループ化されたカラースキーム (代替)]() | Web 変数 : `--now-color_grouped--yellow-4` | [表 : 2. グループ化されたカラーパレット] {#color-var-ui-rule__table_f5d_c1q_1xb}