Unterstützung von Farbvariablen für UI-Regeln

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

Farbleitfaden für mobile UI-Regel

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.

Tabelle : 1. Warnungsfarbpalette

Farbname	Beispiel	Farbvariablen
Kritisch		Mobile Variable Warnung--kritisch-0 Webvariable --now-color_Alert--critical-0
Hoch		Mobile Variable alert--high-0 Webvariable --now-color_Alert--High-0
Warnung		Mobile Variable Warnung--warning-0 Webvariable --now-color_Alert--warning-0
Mittel		Mobile Variable Warnung--Mittel-0 Webvariable --now-color_Alert--moderate-0
Info		Mobile Variable alert--info-0 Webvariable --now-color_Alert--info-0
Positiv		Mobile Variable Warnung--positiv-0 Webvariable --now-color_Alert--positive-0
Niedrig		Mobile Variable alert--low-0 Webvariable --now-color_Alert--low-0
Deaktiviert		Mobile Variable Warnung-deaktivierter-background Webvariable --now-color_background--sekundär
Kritisch (Alternative)		Mobile Variable Warnung--kritisch-4 Webvariable --now-color_Alert--critical-4
Hoch (Alternativ)		Mobile Variable alert--high-4 Webvariable --now-color_Alert--High-4
Warnung (Alternative)		Mobile Variable Warnung--Warnung-4 Webvariable --now-color_Alert--warning-4
Mittel (Alternative)		Mobile Variable Warnung--Mittel-4 Webvariable --now-color_Alert--moderate-4
Info (Alternative)		Mobile Variable alert--info-4 Webvariable --now-color_Alert--info-4
Positiv (Alternative)		Mobile Variable Warnung--positiv-4 Webvariable --now-color_Alert--positive-4
Niedrig (Alternative)		Mobile Variable alert--low-4 Webvariable --now-color_Alert--low-4
Deaktiviert (Alternative)		Mobile Variable Alert-disabled-Text Webvariable --now-color_Text--tertiär

Tabelle : 2. Gruppierte Farbpalette

Farbname	Beispiel	Farboptionen
Blau		Webvariable --now-color_grouped--Blue-0
Braun		Webvariable --now-color_grouped--Brown-0
Grau		Webvariable --now-color_grouped--Grey-0
Grün		Webvariable --now-color_grouped--Green-0
Grüngelb		Webvariable --now-color_grouped--Green-yellow-0
Magenta		Webvariable --now-color_grouped--magenta-0
Orange		Webvariable --now-color_grouped--orange-0
Rosa		Webvariable --now-color_grouped--pink-0
Lila		Webvariable --now-color_grouped--lila-0
Blaugrün		Webvariable --now-color_grouped--Teal-0
Gelb		Webvariable --now-color_grouped--yellow-0
Blau (Alternative)		Webvariable --now-color_grouped--Blue-4
Braun (Alternative)		Webvariable --now-color_grouped--Brown-4
Grau (Alternative)		Webvariable --now-color_grouped--Grey-4
Grün (Alternative)		Webvariable --now-color_grouped--Green-4
Grün-Gelb (Alternative)		Webvariable --now-color_grouped--Green-yellow-4
Magenta (Alternative)		Webvariable --now-color_grouped--magenta-4
Orange (Alternative)		Webvariable --now-color_grouped--orange-4
Rosa (Alternative)		Webvariable --now-color_grouped--pink-4
Lila (Alternative)		Webvariable --now-color_grouped--lila-4
Blaugrün (Alternative)		Webvariable --now-color_grouped--blaugrün-4
Gelb (Alternative)		Webvariable --now-color_grouped--yellow-4