Theme editor

Before you start

Before completing this authoring cards tutorial, we highly recommend you complete the prerequisite Introduction to the workbench tutorial.

This tutorial refers to the theme editor, however product managers, product owners, and client engineers may like to explore other SDK configuration options in: Integrate the SDKs

Team members responsible for the authoring cards can also complete the Authoring Cards tutorial.

Overview

How cards render in your apps is highly configurable.

The styling of containers, streams, cards, and associated states (such as loading and error) are all configured when integrating the SDK, or in the Theme editor.

Theme editor

The Theme editor is located at Configuration > Container Themes

Where and how are themes used?

A stream container is embedded in one or more of your apps, and renders a single collection of cards, which we call a stream.

Each stream container also renders a single theme (or two, if using dark mode).

Editing theme elements

Permission to edit themes

Permission to view & edit themes can be configured by your account owner. Contact them for access, if you can not access the theme editor.

Within the Theme editor — as with the card editor — as you edit the elements on the left, a preview of the web SDK is presented on the right.

The 250+ editable elements of the theme are divided into five categories in the UI:

1. Variables: Allows quick updates across multiple elements at once.
2. Containers: The Container of streams and subviews.
3. Top-level card: The default view of a card.
4. Subview: The secondary layout, accessed by link-buttons on the top-level.
5. System: All other system elements, including states, feedback, accessibility, and footer elements.

Variables

There are three types of Variables that can be used throughout the theme:

Colors

• When naming colors it’s useful to align them with your branding or design system naming conventions – eg. Primary, Secondary etc. Colors used for alerts can be named semantically – eg. Destructive, Warning, Success.

Fonts

• When naming fonts it’s useful to align you branding or design system, or by their font family name and weight – eg. Inter 400, Inter 700. This makes it easier to identify what weight and style should be set on each element.
• Use otf or ttf format for URLs.
• The weight is either normal or bold.
• The style is either normal or italics.

Font size

• As with Colors and Fonts, naming that aligns with your branding or design system helps consistency – eg. sm, md, lg, xl etc.

Learn more

See our Help Docs on the Theme Editor for more details on the other 250+ editable elements.

Platform support

By default all elements are supported across web, iOS and Android platforms.

Images and videos are all supported, but different SDKs support different formats. See the Supported media formats table for more information.

Exceptions are presented with a platform icon next to the editable element, indicating which specific platforms are supported.

Preview Cards

Use the preview switcher to look at your specific cards, and see what they will look like with that theme applied.

Platform differences

The preview in the workbench shows what the card will look like in the Web SDK. The iOS and Android platforms might render elements differently, as explained in Platform support.

Theme JSON Object

Each theme is actually a JSON object. If you are more comfortable editing code, you may like to access this to make bulk edits by selecting the overflow menu (3 vertical dots) and then Show JSON.

Learn more

See the Style Reference in our docs to dig deeper on what each of these elements are.

Configuring themes

Themes are configured within containers and streams.

Themes are referenced in a container — which is where you also reference the stream of cards the container renders.

Locate these at Configuration > Stream Containers

Preview in demo apps

After saving theme changes, to preview them on the demo apps, you'll need to hard refresh the app twice to update any theme changes you make.

A container has a minimum of one theme, plus the option of enabling dark mode. These can be configured to automatically render according to the customer’s OS appearance settings.

Learn more

Learn more about display options in our Integrating the SDKs tutorial.

Accessibility

Dynamic font scaling

The Atomic iOS and Android SDKs support dynamic font scaling. When enabled, this allows typography styles that opt-in to dynamic scaling to respond to the font size preference set by the customer on their device.

To opt-in, select a specific text element (eg. Headline > Text) and switch Dynamic scaling on. Optionally specify a minimum and maximum font size.

Learn more

Learn more about Dynamic font scaling.

Alternate text

Alternate text is supported on all image and video components. You can supply a description of an image or video when authoring a card. Alternate text forms part of a description that is passed to the system screen reader (when enabled).

Learn more

Learn more about Alternate text.

Focus rings

The Atomic Web SDK allows you to customize the focus ring used to highlight components when a user tabs through a stream container or single card view. The focus ring is rendered as a solid outline around the active component, and only appears when the user tabs between components using their keyboard.

To customize the focus ring:

1. Open the Atomic Workbench.
2. Navigate to the Theme editor.
3. Select a theme and then choose System > Accessibility > Focus ring.

There are two options you can customize for the focus ring color:

• Feed: refers to the screen displaying the card list or single card;
• Subview: all other screens in the SDK.

Learn more

Learn more about Accessibility.