Create and configure a theme
You can create custom themes to match your organization's branding guidelines or to better fit the tone of your content. A theme you create is stored as a StoryMap theme ArcGIS item so it can be applied to different pieces of content you or others create with ArcGIS StoryMaps.
Create a theme
Use the following steps to create a new theme:
Sign in to ArcGIS StoryMaps.
On the ArcGIS StoryMaps content page, click Create, and then click Theme to create a new StoryMap theme item and launch the theme builder.
The theme builder displays a panel with starting options and a sample story that shows a preview of your theme configuration choices.
Tip:
You can also create a new theme from the ArcGIS StoryMap builders. Click the Design button in the header and then click the Create new theme button in the design panel.
In the Choose a starting point panel, click the cards to preview each option. Available options may include the following:
Shared theme—Import your organization's shared theme settings for body background, body text color, button text color, header background color, header text color, link color, logo, and logo link. The shared theme button background color will also be used to set your new theme's accent color. This option will only appear if an administrator has configured a shared theme.
Theme assistant—Use AI to generate a theme. This option will only appear if AI features are enabled in your organization. For more information, see ArcGIS StoryMaps assistant.
Standard themes—Choose a standard theme. The properties of each standard theme are documented in the Theme reference.
Click Select below the option you want to use as the starting point for your custom theme.
After you choose a starting point, the panel will display theme configuration options.
Give your theme a title by replacing the Untitled theme text at the top of the panel.
Adjust any of the configuration options as needed.
The sections below describe the available Global properties and Element properties.
As you build a theme, the sample story shows a preview of how the theme will look when applied to various types of content blocks.
Click Publish to publish the theme.
Note:
Themes follow the same publishing workflows as other items created with ArcGIS StoryMaps.
Global properties
Global properties affect the entire piece of ArcGIS StoryMaps content to which they are applied. Available global options include colors, typography, spacing, and shape.
Configure colors
Use the following steps to configure color options for your theme:
Choose a background color.
Note:
The secondary background color is automatically calculated as a variant of the primary background color; it is not configurable. It is available in theme builder so warnings can be shown if its contrast with corresponding text colors is not sufficient for accessibility.
Choose an accent color.
This primary accent color will be used for other elements such as buttons, separators, quotes, and links; however, you may override this color in the sections for configuring these individual elements.
Choose two additional accent colors.
When authors use your theme, these colors will be available in the color picker.
Configure typography
Use the following steps to configure typography options for your theme:
Choose a font size.
Choose a font and color for title and headings text.
Choose a font and color for paragraph text.
Choose a color for caption text.
The paragraph font is also used for captions.
Note:
You can add a font family from Google Fonts for more options when creating a theme. You can also change the font style weights for the selected font family.
To enable Google Fonts when creating themes for ArcGIS Enterprise accounts, an administrator must provide a valid Google Fonts API Key in Organization settings.
Spacing
The spacing property affects the size of the gap between content blocks in a story. There are two spacing options to choose from: Spacious or Compact.
Shape
The shape property affects the rounding of corners of media blocks in stories, express map pop-ups, buttons, media controls, briefing panels, and other visual elements. There are three shape styles to choose from: Sharp, Soft, or Curved.
Element properties
Element properties affect one block, or aspect, of a piece of content. Available element properties include header, buttons, quotes, links, separators, basemap, and logo.
Configure the header
Use the following steps to configure the header for your theme:
Choose a header background color.
Optionally, choose a header text color.
If you do not choose a header text color, the theme builder will automatically choose white or black text to ensure sufficient contrast with your chosen header background color.
Configure buttons
Use the following steps to configure buttons for your theme:
Choose a button position.
Optionally, choose a button style.
If you do not choose a button style, the global shape property is used.
Optionally, choose a button background color.
If you do not choose a button background color, the global accent color is used.
Optionally, choose a button text color.
If you do not choose a button text color, theme builder will automatically choose white or black text to ensure sufficient contrast with your chosen button background color.
Configure quotes
Use the following steps to configure quotes for your theme:
Choose a quote style.
Note:
Quote text uses the paragraph color and quote attribution uses the caption color, which are configured in the colors section. If you choose the filled quote style, the quote and quote attribution text colors will be changed to white or black to ensure sufficient contrast.
Choose a quote alignment.
Optionally, choose a custom quote color.
Each quote style has a flourish that uses an accent color. If you do not choose a custom quote color, the global accent color is used.
Configure links
Use the following steps to configure links for your theme:
Choose a link style.
Note:
If you choose the filled link style, the link text color will be changed to white or black to ensure sufficient contrast.
Optionally, choose a custom link color.
If you do not choose a custom link color, the global accent color is used.
Configure separators
Use the following steps to configure separators for your theme:
Choose a separator style.
If you choose the image separator style, you will be prompted to upload an image.
Optionally, choose a custom separator color.
This option is not available if you have added an image separator.
Choose a separator position.
Configure the basemap
The web map specified here is used as the default basemap for express maps and map tours. Authors using your theme may choose a different basemap for any content they create.
Use the following steps to configure a default basemap for your theme:
Click the basemap tile to see the basemap picker.
Click the Browse more maps button to choose a basemap from a web map in your ArcGIS content, groups, or organization.
Optionally, choose a web map from ArcGIS Living Atlas or any publicly available web map.
Note:
The map specified here must be in Web Mercator projection.
Configure a logo
Use the following steps to configure a logo for your theme:
Click Upload logo and choose a logo file.
For the best quality, upload a PNG that is at least 80px tall or an SVG.
Optionally, add a logo link.
Readers will be taken to this website if they click the logo in the story header.
Optionally, add logo alternative text.
It is recommended that you add alternative text to improve accessibility.
Accessibility
When designing a theme, it is important to consider the contrast between the text and background colors to ensure legibility of the text content in your story or collection. The theme builder calculates contrast ratios each time you change a color and will warn you if there is insufficient contrast between colors that are used together.
The contrast calculations and warning thresholds follow WCAG guidelines. The contrast ratios are available in case you choose to use a different set of guidelines. Click to expand the contrast checker to see additional detail.
For more information, see Accessibility in StoryMaps.