ArcGIS Instant Apps

It has never been easier to add color to your Instant Apps using the new theme component

The June 2022 ArcGIS Online update introduced a highly requested set of theming tools into the Instant Apps experience. Now app authors will be able to customize the visual style of an app through predefined color combinations, custom fonts, custom logos, and editable theme colors. Using the preset themes feature, you will be able to style all the elements of your app in one easy step. We have included 10 new color themes that will make it easier to match the colors of your map or complement your organization’s branding. Each theme has a high contrast -approved color combination. This is especially beneficial for visually impaired users.

 

What is a theme?

Color themes are an effortless way to create a vibrant and modern-looking app. A theme may include everything from the color of the menus, background, fonts, headers, panels, and toolbars. Previously, editing the color value for each of these individual elements was time-consuming and could result in unusual color combinations that may not be accessible to the visually impaired.

 

Why have predefined themes?

 

The preset themes feature blends all these elements together in one easy step. These settings allow application authors to use recommended, pre-configured, and accessible color combinations for each supported Instant App. We also offer the option to customize any of the colors to create your own pre-set theme. This may be helpful if you are matching a branding color or trying to tie in a certain color from the map. The contrast ratio tool will also check the color values of the background and fonts to make sure everything is WCAG2 accessibility approved.

 

Getting Started

When you first open an Instant App, the Express Setup will quickly guide you through all the steps needed to build your app. To access the theming tools, progress to the step labeled Theme & Layout. The Express setup offers only the theme preset colors. In order to take advantage of additional features like customization of colors, selecting fonts, and branding, you will need to go to the Full setup experience. This can easily be done by clicking the Express toggle switch at the top of the configuration toolbar (Image 1).

 

 

 

Image 1 - Switch to Full Setup

Theme & Layout

Once in the Full Setup experience, click Theme & Layout in the toolbar and browse to the Theme section to locate the Theme setting (Image 2).

Image 2 - Theme section

Select color mode

The default base theme for your app will always be the light or dark mode. Click on Select a mode to see the color swatches change in the preview section on the right panel. The benefit of using a light or dark theme is that each will work with all styles of maps. (Image 3 and Image 4).

Select a font

Another new feature of the Theme section is the ability to change fonts. There are an additional 11 new fonts available, and they can be applied to the header. Adding different font styles to your app can really change the appearance of a text-heavy app or help accent the font header style. (Image 5).

Image 5 - Select a font

Preset themes

Select the Preset themes menu to view the 10 color swatch options. The presets make it easy to experiment with different themes to personalize the look and feel of your app. There are a variety of themes to complement all kinds of maps. From the desert warm earthy tones of Clay to the more muted concrete-focused colors of Street. The themes allow the app author to integrate the User Interface styling to match the map. For example, the Forest and Indigo preset themes were applied to match the green and violet color styles of the map. (Image 6 and Image 7).

 

Image 6 - Preset Forest theme
Image 7 - Preset Indigo theme

Customize your theme

In addition to the 10 preset themes, there is an option to customize the current color swatches using the new Customize tool. This is especially helpful when the current preset theme needs a slight color adjustment to make it match an element on a map or a school’s branding colors, for example. This can also be done using the . The shared theme is one of the presets available on the menu. (Image 8 and Image 9)

 

Image 8 - Customize theme
Image 9 - Contrast Level

Color contrast WCAG 2.1 Checker

Another helpful feature in the Customize color panel is the ability to see if the color of the text and background passes the WCAG 2.1 Color contrast accessibility standards. WCAG 2.1 are guidelines that define how to make web content more accessible to people with disabilities. Providing contrasting text and background colors ensures that your app is accessible to those with visual and neurological disabilities. (Image 10).

Image 10 -Contrast checker

Shared theme

Select the Shared theme option under the Preset themes menu to access a predefined style or your organization’s shared theme, if available. Like Preset themes, you have the option to customize the current color swatches using the new Customize tool. (Image 11 and Image 12)

Image 11 - Shared theme
Image 12 - Shared theme

Branding

The branding section lets you upload a custom logo using any image in JPEG, PNG, or GIF file formats. For the best results, the image should be 300×300 pixels with a transparent background. (Image 13)

Image 13 - Upload image

What Instant Apps will include the theme tools

The theme tools will be added to most of the Instant Apps this release. Here is a full list of apps: 3D Viewer, Attachment viewer, Basic, Countdown, Chart Viewer, Nearby, Zone Lookup, Portfolio, Exhibit, Media Map, Slider, and Sidebar. (Image 14)

Image 14 - Instant App template examples

About the authors

Sarah is a Product Engineer for ArcGIS Online that works on Instant Apps. She has been with Esri since 2016 and enjoys cycling, yoga, and hanging with her dog.

Connect:

Kurt Stremel

Kurt is a Senior User Experience Designer that works on the ArcGIS Online Instant Apps team.

Lucy Gonzalez

Lucy is a UI Designer in the Instant Apps team at Esri.

Connect:
0 Comments
Inline Feedbacks
View all comments

Next Article

Managing Electric Networks: Updating Subnetworks

Read this article