---
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 Symbole

# Unterstützung von Farbvariablen für Symbole {#ariaid-title1}

* Freigeben Version: Yokohama
* 
* Aktualisiert 30. Januar 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 Minuten Lesedauer

Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design auf Ihren mobilen Kartenbildschirmen zu ändern

|-|-|
| Mobile Symbole haben ein Legen Sie die Darstellung fest Abschnitt, der zum Definieren der Darstellung Ihrer Symbole verwendet wird. Verwenden Sie Schriftfarbvariable Stiloption zur Verwendung einer Farbvariablen einer Farbe. Mit diesem Stil können Sie eine beliebige Farbvariable aus der Tabelle „UX-Designeigenschaften" \[sys_ux_theme_property\] definieren. Eine Liste der verfügbaren Variablen finden Sie im Farbdesignleitfaden unten. Details zum Erstellen von Kartenbildschirmen 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."). Details zum Erstellen von Symbolen in Mobilgeräten finden Sie unter [Mobile Symbole](https://servicenow-prod.fluidtopics.net/OX2twrImnHqM6YaO1nEFxg "Verwenden Sie Symbole, um eindeutige Bezeichner für Navigation und Aktionen in Ihren mobilen Anwendungen bereitzustellen."). |   |
[ ]

{#color-var-mobile-icons__table_st2_mtb_yvb}

## Farbleitfaden für Mobilsymbol {#color-var-mobile-icons__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.

Jede Supportfarbe verfügt über drei Optionen, einschließlich einer bewertbaren Option. Erwägen Sie die Verwendung der verfügbaren Farboption für Symbole, die keinen Text enthalten, um die Navigationsfähigkeit für Ihre Anwender zu verbessern.
{#color-var-mobile-icons__table_otd_c1q_1xb__entry__3}

| Farbname | Beispiel | Farbvariablen |
|-|-|-|
| Kritisch | ![Kritische mobile Symbole]() | Mobile Variablen : * Option 1: `Warnung--kritisch-2 ` * Option 2: `Warnung--kritisch-3 ` * Option 3 (Zugänglich): `Warnung--kritisch-4 ` {#color-var-mobile-icons__ul_hqj_lzh_cxb} Webvariable : * Option 1: `--now-color_Alert--critical-2 ` * Option 2: `--now-color_Alert--critical-3 ` * Option 3 (Zugänglich): `--now-color_Alert--critical-4 ` {#color-var-mobile-icons__ul_wvy_lzh_cxb} |
| Hoch | ![Hohe mobile Symbole]() | Mobile Variablen : * Option 1: `Warnung--hoch-2 ` * Option 2: `Warnung--hoch-3 ` * Option 3 (Zugänglich): `Warnung--hoch-4 ` {#color-var-mobile-icons__ul_lsh_rxm_cxb} Webvariable : * Option 1: `--now-color_Alert--High-2 ` * Option 2: `--now-color_Alert--High-3 ` * Option 3 (Zugänglich): `--now-color_Alert--High-4 ` {#color-var-mobile-icons__ul_msh_rxm_cxb} |
| Warnung | ![Mobile Warnsymbole]() | Mobile Variablen : * Option 1: `Warnung--Warnung-2 ` * Option 2: `Warnung--Warnung-3 ` * Option 3 (Zugänglich): `Warnung--Warnung-4 ` {#color-var-mobile-icons__ul_hxg_5xm_cxb} Webvariable : * Option 1: `--now-color_Alert--warning-2 ` * Option 2: `--now-color_Alert--warning-3 ` * Option 3 (Zugänglich): `--now-color_Alert--warning-4 ` {#color-var-mobile-icons__ul_ixg_5xm_cxb} |
| Mittel | ![Symbole für mittlere Mobilgeräte]() | Mobile Variablen : * Option 1: `Warnung--Mittel-2 ` * Option 2: `Warnung--Mittel-3 ` * Option 3 (Zugänglich): `Warnung--Mittel-4 ` {#color-var-mobile-icons__ul_upy_vxm_cxb} Webvariable : * Option 1: `--now-color_Alert--moderate-2 ` * Option 2: `--now-color_Alert--moderate-3 ` * Option 3 (Zugänglich): `--now-color_Alert--moderate-4 ` {#color-var-mobile-icons__ul_vpy_vxm_cxb} |
| Info | ![Mobile Info-Symbole]() | Mobile Variablen : * Option 1: `Warnung--info-2 ` * Option 2: `Warnung--info-3 ` * Option 3 (Zugänglich): `Warnung--info-4 ` {#color-var-mobile-icons__ul_bhs_xxm_cxb} Webvariable : * Option: 1 `--now-color_Alert--info-2 ` * Option 2: `--now-color_Alert--info-3 ` * Option 3 (Zugänglich): `--now-color_Alert--info-4 ` {#color-var-mobile-icons__ul_chs_xxm_cxb} |
| Positiv | ![Positive mobile Symbole]() | Mobile Variablen : * Option 1: `Warnung--positiv-2 ` * Option 2: `Warnung--positiv-3 ` * Option 3 (Zugänglich): `Warnung--positiv-4 ` {#color-var-mobile-icons__ul_hy3_1ym_cxb} Webvariable : * Option 1: `--now-color_Alert--positive-2 ` * Option 2: `--now-color_Alert--positive-3 ` * Option 3 (Zugänglich): `--now-color_Alert--positive-4 ` {#color-var-mobile-icons__ul_iy3_1ym_cxb} |
| Niedrig | ![Niedrige mobile Symbole]() | Mobile Variablen : * Option 1: `Warnung--niedrig-2 ` * Option 2: `Warnung--niedrig-3 ` * Option 3 (Zugänglich): `Warnung--niedrig-4 ` {#color-var-mobile-icons__ul_avy_bym_cxb} Webvariable : * Option 1: `--now-color_Alert--low-2 ` * Option 2: `--now-color_Alert--low-3 ` * Option 3 (Zugänglich): `--now-color_Alert--low-4 ` {#color-var-mobile-icons__ul_bvy_bym_cxb} |
[Tabelle : 1. Warnungsfarbpalette]

{#color-var-mobile-icons__table_otd_c1q_1xb} {#color-var-mobile-icons__table_f5d_c1q_1xb__entry__3}

| Farbname | Beispiel | Farboptionen |
|-|-|-|
| Blau | ![Blaue mobile Symbole]() | Webvariable : * Option 1: `--now-color_grouped--Blue-2 ` * Option 2: `--now-color_grouped--Blue-3 ` * Option 3 (Zugänglich): `--now-color_grouped--Blue-4 ` {#color-var-mobile-icons__ul_lqy_gym_cxb} |
| Braun | ![Braune mobile Symbole]() | Webvariable : * Option 1: `--now-color_grouped--Brown-2 ` * Option 2: `--now-color_grouped--Brown-3 ` * Option 3 (Zugänglich): `--now-color_grouped--Brown-4 ` {#color-var-mobile-icons__ul_kcy_kym_cxb} |
| Grau | ![Graue mobile Symbole]() | Webvariable : * Option 1: `--now-color_grouped--Grey-2 ` * Option 2: `--now-color_grouped--Grey-3 ` * Option 3 (Zugänglich): `--now-color_grouped--Grey-4 ` {#color-var-mobile-icons__ul_ols_lym_cxb} |
| Grün | ![Grüne mobile Symbole]() | Webvariable : * Option 1: `--now-color_grouped--Green-2 ` * Option 2: `--now-color_grouped--Green-3 ` * Option 3 (Zugänglich): `--now-color_grouped--Green-4 ` {#color-var-mobile-icons__ul_fy1_nym_cxb} |
| Grüngelb | ![Grün-gelbe mobile Symbole]() | Webvariable : * Option 1: `--now-color_grouped--Green-yelow-2 ` * Option 2: `--now-color_grouped--Green-yelow-3 ` * Option 3 (Zugänglich): `--now-color_grouped--Green-yelow-4 ` {#color-var-mobile-icons__ul_l5v_nym_cxb} |
| Magenta | ![Symbole für Mobilgeräte Magenta]() | Webvariable : * Option 1: `--now-color_grouped--magenta-2 ` * Option 2: `--now-color_grouped--magenta-3 ` * Option 3 (Zugänglich): `--now-color_grouped--magenta-4 ` {#color-var-mobile-icons__ul_vlk_pym_cxb} |
| Orange | ![Orangefarbene mobile Symbole]() | Webvariable : * Option 1: `--now-color_grouped--orange-2 ` * Option 2" `--now-color_grouped--orange-3 ` * Option 3 (Zugänglich): `--now-color_grouped--orange-4 ` {#color-var-mobile-icons__ul_xyn_qym_cxb} |
| Rosa | ![Rosa Mobile-Symbole]() | Webvariable : * Option 1: `--now-color_grouped--pink-2 ` * Option 2: `--now-color_grouped--pink-3 ` * Option 3 (Zugänglich): `--now-color_grouped--pink-4 ` {#color-var-mobile-icons__ul_xsm_rym_cxb} |
| Lila | ![Lila mobile Symbole]() | Webvariable : * Option 1: `--now-color_grouped--lila-2 ` * Option 2: `--now-color_grouped--lila-3 ` * Option 3 (Zugänglich): `--now-color_grouped--lila-4 ` {#color-var-mobile-icons__ul_dbl_sym_cxb} |
| Blaugrün | ![Blaue mobile Symbole]() | Webvariable : * Option 1: `--now-color_grouped--blaugrün-2 ` * Option 2: `--now-color_grouped--blaugrün-3 ` * Option 3 (Zugänglich): `--now-color_grouped--blaugrün-4 ` {#color-var-mobile-icons__ul_egx_tym_cxb} |
| Gelb | ![Gelbe mobile Symbole]() | Webvariable : * Option 1: `--now-color_grouped--yellow-2 ` * Option 2: `--now-color_grouped--yellow-3 ` * Option 3 (Zugänglich): `--now-color_grouped--yellow-4 ` {#color-var-mobile-icons__ul_w3p_vym_cxb} |
[Tabelle : 2. Gruppierte Farbpalette]

{#color-var-mobile-icons__table_f5d_c1q_1xb}