--- sourceDocument: Yokohama Mobile-Konfiguration und -Navigation sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/mobile Release : - yokohama ft:locale : - de-DE ft:publication_title : - Yokohama Mobile-Konfiguration und -Navigation ft:clusterId : - mobile bundleId : - mobile workflow : - Platform --- # Unterstützung von Farbvariablen für UI-Regeln # Unterstützung von Farbvariablen für UI-Regeln {#ariaid-title1} * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 Minute Lesedauer Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in Ihren mobilen UI-Regeln zu ändern. |-|-| | Verwenden Sie die folgenden Farbvariablen in Wert Feld Ihrer UI-Regeln mit Vorgang Feld auf festgelegt Legen Sie den UI-Stil fest * `BackgroundColorVariable` * `Schriftfarbvariable `Außerhalb oder innerhalb von `TextDecorator ` {#color-var-ui-rule__ul_nnz_533_ywb} Sie können jede Farbvariable aus der Tabelle „UX-Designeigenschaften" \[sys_ux_theme_property\] definieren. Eine Liste der verfügbaren Variablen finden Sie im Farbdesignleitfaden unten. Zum Beispiel: `{„BackgroundColorVariable": „--now-color-secondary-3", „BackgroundColor": „#3f2c11"}` Details zum Erstellen dieser UI-Regelaktionen finden Sie unter [Erstellen Sie eine mobile UI-Regelaktion](https://servicenow-prod.fluidtopics.net/uxkHzGYhU4jLIAy42~Vsmw "Erstellen Sie die Aktionen, die ausgeführt werden, wenn die Bedingungen für die mobile UI-Regel erfüllt sind."). | | [ ] {#color-var-ui-rule__table_fbp_nfb_yvb} ## Farbleitfaden für mobile UI-Regel {#color-var-ui-rule__section_vvh_wzp_1xb} Farbvariablen sind unterteilt. Verwenden Sie die Designleitlinie, um die richtige Farbvariable für Ihren Anwendungsfall zu identifizieren. Warnungsfarbpalette : Farben der Warnungsfarbpalette heben wichtige Status, status und Aufgaben hervor. Verwenden Sie Warnungsfarben, um eine bestimmte Bedeutung zu kommunizieren, anstatt für Dekoration oder Organisation. Gruppierte Farbpalette : Gruppierte Farbpalettenfarben entsprechen den Farbkonventionen in einer Branche. Verwenden Sie diese Farben, um anzuzeigen, dass das farbige Element einer bestimmten Branche oder Branche zugeordnet ist. Die Bedeutung der einzelnen Farben hängt vom Kontext ab, sollte jedoch innerhalb Ihrer App konsistent bleiben. {#color-var-ui-rule__table_otd_c1q_1xb__entry__3} | Farbname | Beispiel | Farbvariablen | |-|-|-| | Kritisch | | Mobile Variable : `alert--critical-0` Webvariable : `--now-color_Alert--critical-0` | | Hoch | | Mobile Variable : `alert--high-0` Webvariable : `--now-color_Alert--High-0` | | Warnung | | Mobile Variable : `alert--warning-0` Webvariable : `--now-color_Alert--warning-0` | | Mittel | | Mobile Variable : `alert--moderate-0` Webvariable : `--now-color_Alert--moderate-0` | | Info | | Mobile Variable : `alert--info-0` Webvariable : `--now-color_Alert--info-0` | | Positiv | | Mobile Variable : `alert--positive-0` Webvariable : `--now-color_Alert--positive-0` | | Niedrig | | Mobile Variable : `alert--low-0` Webvariable : `--now-color_Alert--low-0` | | Deaktiviert | ![Warnungsfarbschema deaktiviert]() | Mobile Variable : `Warnung-deaktivierter-background` Webvariable : `--now-color_background--sekundär` | | Kritisch (Alternative) | ![Alternative Farbschema für kritische Warnung]() | Mobile Variable : `alert--critical-4` Webvariable : `--now-color_Alert--critical-4` | | Hoch (Alternativ) | ![Alternative Warnungsfarbschema „hoch“]() | Mobile Variable : `alert--high-4` Webvariable : `--now-color_Alert--High-4` | | Warnung (Alternative) | ![Alternative Farbschema für Warnungswarnung]() | Mobile Variable : `alert--warning-4` Webvariable : `--now-color_Alert--warning-4` | | Mittel (Alternative) | ![Alternative Warnungsfarbschema „Mittel“]() | Mobile Variable : `alert--moderate-4` Webvariable : `--now-color_Alert--moderate-4` | | Info (Alternative) | ![Alternative Farbschema für Info-Warnung]() | Mobile Variable : `alert--info-4` Webvariable : `--now-color_Alert--info-4` | | Positiv (Alternative) | ![Alternative Farbschema für positive Warnungen]() | Mobile Variable : `alert--positive-4` Webvariable : `--now-color_Alert--positive-4` | | Niedrig (Alternative) | ![Alternative Farbschema für niedrige Warnungen]() | Mobile Variable : `alert--low-4` Webvariable : `--now-color_Alert--low-4` | | Deaktiviert (Alternative) | ![Alternative Warnungsfarbschema deaktiviert]() | Mobile Variable : `Alert-disabled-Text` Webvariable : `--now-color_Text--tertiär` | [Tabelle : 1. Warnungsfarbpalette] {#color-var-ui-rule__table_otd_c1q_1xb} {#color-var-ui-rule__table_f5d_c1q_1xb__entry__3} | Farbname | Beispiel | Farboptionen | |-|-|-| | Blau | ![Blau gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--Blue-0` | | Braun | ![Braunes gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--Brown-0` | | Grau | ![Grau gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--Grey-0` | | Grün | ![Grün gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--Green-0` | | Grüngelb | ![Grün-gelb gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--Green-yellow-0` | | Magenta | ![Gruppiertes Magenta-Farbschema]() | Webvariable : `--now-color_grouped--magenta-0` | | Orange | ![Orangefarbenes gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--orange-0` | | Rosa | ![Gruppiertes Rosa-Farbschema]() | Webvariable : `--now-color_grouped--pink-0` | | Lila | ![Lila gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--lila-0` | | Blaugrün | ![Blaugrün gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--Teal-0` | | Gelb | ![Gelb gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--yellow-0` | | Blau (Alternative) | ![Blau gruppierte Alternative Farbschema]() | Webvariable : `--now-color_grouped--Blue-4` | | Braun (Alternative) | ![Alternative gruppiertes Farbschema Braun]() | Webvariable : `--now-color_grouped--Brown-4` | | Grau (Alternative) | ![Grau gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--Grey-4` | | Grün (Alternative) | ![Alternative grün gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--Green-4` | | Grün-Gelb (Alternative) | ![Grün-gelb gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--Green-yellow-4` | | Magenta (Alternative) | ![Alternative gruppiertes Magenta-Farbschema]() | Webvariable : `--now-color_grouped--magenta-4` | | Orange (Alternative) | ![Alternative orangefarbene gruppierte Farbschemata]() | Webvariable : `--now-color_grouped--orange-4` | | Rosa (Alternative) | ![Alternative gruppiertes Rosa-Farbschema]() | Webvariable : `--now-color_grouped--pink-4` | | Lila (Alternative) | ![Alternative violett gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--lila-4` | | Blaugrün (Alternative) | ![Alternative gruppiertes Farbschema in Blaugrün]() | Webvariable : `--now-color_grouped--blaugrün-4` | | Gelb (Alternative) | ![Gelb gruppiertes Farbschema]() | Webvariable : `--now-color_grouped--yellow-4` | [Tabelle : 2. Gruppierte Farbpalette] {#color-var-ui-rule__table_f5d_c1q_1xb}