Change theme and layout

The Theme & Layout settings in the ArcGIS Instant Apps configuration window include options to change the default appearance of the app. For example, you can choose light or dark mode, apply your organization's shared theme settings (colors and logo if applicable), or use custom CSS to keep your app on brand.

Caution:

Instant Apps updates for the source template may impact an app's custom CSS, so test your app after each product release.

The following table compares settings that may be available in your app:

CapabilityDescription
Custom CSS

Customized CSS allows tailored changes to elements of your web app beyond what is available in the configuration window.

Learn more about custom CSS

Custom logo

Custom logos display in the header of your app. You can also upload an image to include a custom logo in the header with an optional hyperlink (only HTTPS URLs are supported). Changing the logo size provides more space for detailed logos and increases the size of the header.

Custom theme

Custom themes allow you to define a color scheme and font that is different from your app's predefined theme. When you choose custom colors, the contrast ratio for font color and background color is validated for accessibility standards, which require a minimum contrast ratio of 4.5 to ensure text legibility. A warning message appears when the contrast ratio is insufficient. For examples of these options, see the ArcGIS Blog article about theme configuration.

Position manager

Position manager allows you to move and reposition the map tools to create an intuitive experience for the app. Use the button next to a tool name to drag it to a different corner or to change the order of buttons grouped in a corner. Tool locations in the app preview update to match the locations that you choose in the grid.

Preset theme

Preset themes allow you to select a style based on light or dark mode of your app or your organization's shared theme, if available.

Shared theme

Shared theme settings allow you to apply your organization's brand settings.

For an alphabetical table that compares the configurable capabilities, see the app tools matrix (PDF). (Beta templates are excluded until the template is out of beta and ready to be used in production apps.)