Skip to content
Color theme considerations › Configure theming › Next Experience theming › Configuring the Mobile Platform › Mobile Platform
Release: Australia · Updated: 2026-03-12 · Official documentation · View source

Color variable support for icon UI sections

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.

Image omitted: color-var-example-2.png
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 nameColorExampleColor options
Primary
Image omitted: icon-color-primary.png
Primary icon color
Image omitted: icon-example-primary.png
Primary icon example
  • Mobile variable

primary

  • Web variable

--now-color--primary-1

Critical
Image omitted: icon-color-alert.png
Critical icon color
Image omitted: icon-example-critical.png
Critical icon example
  • Mobile variable

alert--critical-2

  • Web variable

--now-color_alert--critical-2

High
Image omitted: icon-color-high.png
High icon color
Image omitted: icon-example-high.png
High icon example
  • Mobile variable

alert--high-2

  • Web variable

--now-color_alert--high-2

Warning
Image omitted: icon-color-warning.png
Warning icon color
Image omitted: icon-example-warning.png
Warning icon example
  • Mobile variable

alert--warning-2

  • Web variable

--now-color_alert--warning-2

Moderate
Image omitted: icon-color-moderate.png
Moderate icon color
Image omitted: icon-example-moderate.png
Moderate icon example
  • Mobile variable

alert--moderate-2

  • Web variable

--now-color_alert--moderate-2

Info
Image omitted: icon-color-info.png
Info icon color
Image omitted: icon-example-info.png
Info icon example
  • Mobile variable

alert--info-2

  • Web variable

--now-color_alert--info-2

Positive
Image omitted: icon-color-positive.png
Positive icon color
Image omitted: icon-example-positive.png
Positive icon example
  • Mobile variable

alert--positive-2

  • Web variable

--now-color_alert--positive-2

Low
Image omitted: icon-color-low.png
Low icon color
Image omitted: icon-example-low.png
Low icon example
  • Mobile variable

alert--low-2

  • Web variable

--now-color_alert--low-2

Grouped color palette

Color nameColorExampleColor options
Blue
Image omitted: icon-color-blue.png
Blue icon color
Image omitted: icon-example-blue.png
Blue icon example
  • Web variable

--now-color_grouped--blue-2

Brown
Image omitted: icon-color-brown.png
Brown icon color
Image omitted: icon-example-brown.png
No alternative text supplied
  • Web variable

--now-color_grouped--brown-2

Gray
Image omitted: icon-color-gray.png
Gray icon color
Image omitted: icon-example-gray.png
Gray icon example
  • Web variable

--now-color_grouped--gray-2

Green
Image omitted: icon-color-green.png
Green icon color
Image omitted: icon-example-green.png
Green icon example
  • Web variable

--now-color_grouped--green-2

Green-Yellow
Image omitted: icon-color-green-yellow.png
Green-yellow icon color
Image omitted: icon-example-green-yellow.png
Green-yellow icon example
  • Web variable

--now-color_grouped--green-yellow-2

Magenta
Image omitted: icon-color-magenta.png
Magenta icon color
Image omitted: icon-example-magenta.png
Magenta icon example
  • Web variable

--now-color_grouped--magenta-2

Orange
Image omitted: icon-color-orange.png
Orange icon color
Image omitted: icon-example-orange.png
Orange icon example
  • Web variable

--now-color_grouped--orange-2

Pink
Image omitted: icon-color-pink.png
Pink icon color
Image omitted: icon-example-pink.png
Pink icon example
  • Web variable

--now-color_grouped--pink-2

Purple
Image omitted: icon-color-purple.png
Purple icon color
Image omitted: icon-example-purple.png
Purple icon example
  • Web variable

--now-color_grouped--purple-2

Teal
Image omitted: icon-color-teal.png
Teal icon color
Image omitted: icon-example-teal.png
Teal icon example
  • Web variable

--now-color_grouped--teal-2

Yellow
Image omitted: icon-color-yellow.png
Yellow icon color
Image omitted: icon-example-yellow.png
Yellow icon example
  • Web variable

--now-color_grouped--yellow-2