You can create custom themes to match your organization's branding guidelines or to better fit the tone of your story or collection. When you create a theme, you can customize the following theme elements: colors, typography, buttons, quotes, links, and separators.
Note:
You can add a logo to the story or collection header under the Customize section of the design panel, which you can open by clicking Design in the header. However, if you select a theme with a logo, the theme logo is applied, and logo options under the Customize section are unavailable.Note:
If your organization administrator has selected an Approved themes group, members of this group will see that group at the top of the list when publishing themes. For more information on selecting an Approved themes group, see ArcGIS StoryMaps administration on ArcGIS Online.Use the following steps to create and publish a theme:
- Click Themes on the website header to browse to the Themes page.
You can also access the Themes page from the story builder by clicking Manage my themes in the Theme section of the Design panel.
- Click New theme to launch the theme builder.
The theme builder displays a sample story with content blocks and a panel for the theme builder options.
- Give your theme a title by replacing the Untitled theme text at the top of the panel.
- Build your theme by selecting from the following options:
Theme element
Options
Colors
Background color
Secondary background color (calculated)
Header color
Accent colors
Note:
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.
Typography
Title and headings
Paragraph
Caption
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.
Note:
To enable Google Fonts when creating themes for ArcGIS Enterprise accounts, the portal administrator must provide a valid Google Fonts API Key in Organization settings. For more information, see ArcGIS StoryMaps administration on ArcGIS Enterprise.
Buttons
Style and color
Quotes
Style, color, and alignment
Links
Style and color
Separators
Style, color, and position
Basemap
Basemap
Note:
The map specified here is used as the default basemap for express maps and map tours. It must be in Web Mercator projection.
Logo
Logo image
Logo link
Logo alternative text
As you build your theme, the theme preview scrolls to the active element and the sample story updates to preview how the theme looks with each of the content blocks.
- Publish the theme.
- Click Publish in the theme builder header to start the publishing process.
- In the publishing process, you select the audience for your theme and click Publish. For more information about the publishing process, see Publish a theme.
A new item of StoryMap Theme type is created. Once a theme is published, you can apply it to a story or collection by selecting it from the Browse themes section of the Design panel.
Note:
A theme must be visible to the readers of the story or collection to which it is applied. If the theme is not shared to the same level, the story or collection is shown using the standard Summit theme.Note:
When publishing a story or collection, the builder notifies you if its theme is not shared sufficiently. This notification is not available if you adjust the sharing from your ArcGIS content page or its ArcGIS item page, so it is recommended that you make sharing changes to stories and collections through the ArcGIS StoryMaps builders.
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 2.1 AA 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 about accessibility, see Accessibility and supported languages.
Standard theme reference
The parameters of the six standard themes are provided in the table below. These may be useful if you want to create a custom theme based on one of the out-of-the-box options.
| Theme | Summit | Obsidian | Ridgeline | Mesa | Tidal | Slate |
|---|---|---|---|---|---|---|
Background color | #ffffff | #0e1116 | #f2f6ed | #faf2e6 | #113f5d | #f7f7f7 |
Accent color | #087f9b | #ea5b41 | #31b871 | #d13e37 | #457778 | #b03535 |
Title and heading font family | Avenir Next | Charter BT | Klint | Elante | Ocean Sans | Pax |
Title and heading font color | #002625 | #f3f3f3 | #192c36 | #131940 | #ffffff | #001c1b |
Paragraph font family | Noto Serif | Basic Commercial | Real Head | Elante | Mahsuri Sans | Swift Neue |
Paragraph font color | #304e4e | #e6f2f2 | #637372 | #574237 | #bebdb1 | #585858 |
Caption font color | #3d6665 | #809e9d | #506b88 | #3a4f64 | # bac8d6 | #001c1b |
Button style | 1 | 3 | 2 | 1 | 1 | 1 |
Quote style | 1 | 1 | 1 | 1 | 3 | 2 |
Link style | 1 | 1 | 1 | 1 | 1 | 1 |
Separator style | 1 | 1 | 1 | 1 | 3 | 2 |
Separator alignment | Left | Left | Left | Left | Center | Full |
Basemap | Human Geography Light | Canvas Dark | Topographic | Modern Antique | Ocean | Newspaper |