Color variable support for icon UI sections

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 1 minute de lecture

    • Learn how to use color variables to change theming in your mobile icon UI sections.

    Icon UI sections have a Color section with two fields to control the foreground and background colors for the element.

    • Background color Variable
    • Foreground color variable
    These two fields can be found on the following tables:
    • Icon section destination launcher [sys_sg_navigation_section_destination_applet_launcher]
    • Icon section destination function [sys_sg_navigation_section_destination_button]
    • Icon section destination screen [sys_sg_navigation_section_destination_screen]

    For details on creating these actions, see Configure an icon UI section.

    You can define any color variable from the UX Theme Properties [sys_ux_theme_property] table. For a list available variables see the color design guide below.

    		 Color variable used in an icon UI section

    Mobile icon UI section color guide

    Color variables are divided into Use the design guideline to identify the right color variable for your use case.

    Alert color palette
    Alert color palette colors highlight important statuses, states and tasks. Use alert colors to communicate a specific meaning rather than for decoration or organization.
    Grouped color palette
    Grouped color palette colors follow color conventions in a line of industry. Use these colors to show that the colored item is associated with a specific industry or line of business. The meaning of each color depends on context, but should remain consistent within your app.

    Alert color palette

    Color name Color Example Color options
    Primary Primary icon color Primary icon example
    Mobile variable
    primary
    Web variable
    --now-color--primary-1
    Critical Critical icon color Critical icon example
    Mobile variable
    alert--critical-2
    Web variable
    --now-color_alert--critical-2
    High High icon color High icon example
    Mobile variable
    alert--high-2
    Web variable
    --now-color_alert--high-2
    Warning Warning icon color Warning icon example
    Mobile variable
    alert--warning-2
    Web variable
    --now-color_alert--warning-2
    Moderate Moderate icon color Moderate icon example
    Mobile variable
    alert--moderate-2
    Web variable
    --now-color_alert--moderate-2
    Info Info icon color Info icon example
    Mobile variable
    alert--info-2
    Web variable
    --now-color_alert--info-2
    Positive Positive icon color Positive icon example
    Mobile variable
    alert--positive-2
    Web variable
    --now-color_alert--positive-2
    Low Low icon color Low icon example
    Mobile variable
    alert--low-2
    Web variable
    --now-color_alert--low-2

    Grouped color palette

    Color name Color Example Color options
    Blue Blue icon color Blue icon example
    Web variable
    --now-color_grouped--blue-2
    Brown Brown icon color
    Web variable
    --now-color_grouped--brown-2
    Gray Gray icon color Gray icon example
    Web variable
    --now-color_grouped--gray-2
    Green Green icon color Green icon example
    Web variable
    --now-color_grouped--green-2
    Green-Yellow Green-yellow icon color Green-yellow icon example
    Web variable
    --now-color_grouped--green-yellow-2
    Magenta Magenta icon color Magenta icon example
    Web variable
    --now-color_grouped--magenta-2
    Orange Orange icon color Orange icon example
    Web variable
    --now-color_grouped--orange-2
    Pink Pink icon color Pink icon example
    Web variable
    --now-color_grouped--pink-2
    Purple Purple icon color Purple icon example
    Web variable
    --now-color_grouped--purple-2
    Teal Teal icon color Teal icon example
    Web variable
    --now-color_grouped--teal-2
    Yellow Yellow icon color Yellow icon example
    Web variable
    --now-color_grouped--yellow-2