---
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 Symbol-UI-Abschnitte

# Unterstützung von Farbvariablen für Symbol-UI-Abschnitte {#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 UI-Abschnitten für mobile Symbole zu ändern.

|-|-|
| Symbol-UI-Abschnitte haben einen Farbe Abschnitt mit zwei Feldern zur Steuerung der Vorder- und Hintergrundfarben für das Element. * Hintergrundfarbvariable * Variable der Vordergrundfarbe {#color-var-ui-section__ul_ovp_tkb_yvb} Diese beiden Felder finden Sie in den folgenden Tabellen: * Ziel-Startprogramm des Symbolabschnitts \[sys_sg_navigation_section_destination_applet_launcher\] * Zielfunktion des Symbolabschnitts \[sys_sg_navigation_section_destination_button\] * Zielbildschirm des Symbolabschnitts \[sys_sg_navigation_section_destination_screen\] {#color-var-ui-section__ul_acr_flx_1xb} Details zum Erstellen dieser Aktionen finden Sie unter [Konfigurieren Sie einen Symbol-UI-Abschnitt](https://servicenow-prod.fluidtopics.net/AdOOr~7bpahkQ1O1yrPzfg "Verwenden Sie den UI-Abschnittstyp des Symbols, um zu Bildschirmen, Startprogramm-Bildschirmen und Funktionen zu navigieren."). 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. |   |
[ ]

{#color-var-ui-section__table_nvp_tkb_yvb}

## Farbleitfaden für UI-Abschnitt des mobilen Symbols {#color-var-ui-section__section_ffp_xkg_cxb}

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.

## Warnungsfarbpalette {#color-var-ui-section__section_d55_nbh_cxb}

{#color-var-ui-section__table_otd_c1q_1xb__entry__4}

| Farbname | Farbe | Beispiel | Farboptionen |
|-|-|-|-|
| Primär | ![Primäre Symbolfarbe]() | ![Beispiel für primäres Symbol]() | Mobile Variable :   `primär` Webvariable :   `--now-color--primary-1 ` |
| Kritisch | ![Farbe des kritischen Symbols]() | ![Beispiel für kritisches Symbol]() | Mobile Variable :   `alert--critical-2` Webvariable :   `--now-color_Alert--critical-2` |
| Hoch | ![Farbe des Symbols „hoch“]() | ![Beispiel für „hoch“-Symbol]() | Mobile Variable :   `alert--high-2` Webvariable :   `--now-color_Alert--High-2` |
| Warnung | ![Farbe des Warnungssymbols]() | ![Beispiel für Warnungssymbol]() | Mobile Variable :   `alert--warning-2` Webvariable :   `--now-color_Alert--warning-2` |
| Mittel | ![Symbolfarbe „Mittel“]() | ![Beispiel für Symbol „Mittel“]() | Mobile Variable :   `alert--moderate-2` Webvariable :   `--now-color_Alert--moderate-2` |
| Info | ![Farbe des Info-Symbols]() | ![Beispiel für Infosymbol]() | Mobile Variable :   `alert--info-2` Webvariable :   `--now-color_Alert--info-2` |
| Positiv | ![Positive Symbolfarbe]() | ![Beispiel für positives Symbol]() | Mobile Variable :   `alert--positive-2` Webvariable :   `--now-color_Alert--positive-2` |
| Niedrig | ![Niedrige Symbolfarbe]() | ![Beispiel für niedriges Symbol]() | Mobile Variable :   `alert--low-2` Webvariable :   `--now-color_Alert--low-2` |
[ ]

{#color-var-ui-section__table_otd_c1q_1xb}

## Gruppierte Farbpalette {#color-var-ui-section__section_dff_pbh_cxb}

{#color-var-ui-section__table_eff_pbh_cxb__entry__4}

| Farbname | Farbe | Beispiel | Farboptionen |
|-|-|-|-|
| Blau | ![Blaue Symbolfarbe]() | ![Beispiel für blaues Symbol]() | Webvariable :   `--now-color_grouped--Blue-2` |
| Braun | ![Braune Symbolfarbe]() | ![]() | Webvariable :   `--now-color_grouped--Brown-2` |
| Grau | ![Graue Symbolfarbe]() | ![Beispiel für graues Symbol]() | Webvariable :   `--now-color_grouped--Grey-2` |
| Grün | ![Grüne Symbolfarbe]() | ![Beispiel für grünes Symbol]() | Webvariable :   `--now-color_grouped--Green-2` |
| Grüngelb | ![Grün-gelbe Symbolfarbe]() | ![Beispiel für grün-gelbes Symbol]() | Webvariable :   `--now-color_grouped--Green-yellow-2` |
| Magenta | ![Magenta-Symbolfarbe]() | ![Beispiel für Magenta-Symbol]() | Webvariable :   `--now-color_grouped--magenta-2` |
| Orange | ![Farbe des orangefarbenen Symbols]() | ![Beispiel für orangefarbenes Symbol]() | Webvariable :   `--now-color_grouped--orange-2` |
| Rosa | ![Rosa Symbolfarbe]() | ![Beispiel für Rosa-Symbol]() | Webvariable :   `--now-color_grouped--pink-2` |
| Lila | ![Farbe des lila Symbols]() | ![Beispiel für lila Symbole]() | Webvariable :   `--now-color_grouped--lila-2` |
| Blaugrün | ![Farbe des blauen Symbols]() | ![Beispiel für blaugrün-Symbol]() | Webvariable :   `--now-color_grouped--blaugrün-2` |
| Gelb | ![Gelbe Symbolfarbe]() | ![Beispiel für gelbes Symbol]() | Webvariable :   `--now-color_grouped--yellow-2` |
[ ]

{#color-var-ui-section__table_eff_pbh_cxb}