The Theme & Layout settings in the 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.
Most apps also include a set of predefined themes to style the app by changing the background and text colors used for app elements, such as the header, panels, and buttons. You can customize the theme by defining your own color scheme and selecting from a list of available fonts. 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 informs you when the contrast ratio is insufficient. You can also upload an image to include a custom logo in the header with an optional hyperlink. (Only HTTPS URLs are supported.) For examples of these options, see the blog article about theme configuration.
Use the Position manager setting, when applicable, 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.
The following table compares applicable settings across the templates:
| Option | 3D Viewer | Atlas | Attachment Viewer | Basic | Category Gallery | Chart Viewer | Compare | Countdown | Exhibit | Imagery Viewer | Insets | Interactive Legend | Manager | Media Map | Nearby | Observer | Portfolio | Public Notification | Reporter | Sidebar | Slider | Streamflow Viewer | Zone Lookup |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Custom CSS |  | | | | | | | | | | | | | | | ||||||||
Custom logo | | | | | | | | | | | | | | | | | | | | | | ||
Custom theme | | | | | | | | | | | | | | | | | | | | | | | |
Position manager | | | | | | | | | | | | | | | | | | | | ||||
Preset theme | | | | | | | | | | | | | | | | | | | | | | | |
Shared theme | | | | | | | | | | | | | | | | | | | | | | | |
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.)