Skip to main content

Dark mode

The Atomic SDKs support an optional dark mode.

Light and dark themes are configured on stream containers in the Atomic Workbench. When a dark theme is provided, the SDK applies the correct theme, depending on the interface style on the stream container, and the appearance (light or dark) chosen by the user in their system settings.

The Atomic Workbench supports configuring a dark theme on a stream container, using the "Stream containers" section of the Workbench:

  1. Open the Workbench, click 'Configuration' in the left hand menu, then click 'Stream containers'.
  2. Choose your stream container, click on the kebab menu (3 vertical dots) on the far right and click “Edit”.
  3. In the modal that appears, you can choose a theme (which will be used as the light theme), and optionally specify a dark theme.

iOS​

The iOS SDK exposes an interfaceStyle property, which can be set to one of three values:

  • “Automatic”: The SDK will use the light theme on versions of iOS prior to 13, and the user’s current preference (light or dark), as defined in their system settings, on iOS 13.
  • “Light”: The SDK will always use the light theme, regardless of system setting.
  • “Dark”: The SDK will always use the dark theme, regardless of system setting.

If you do not specify a dark theme on your stream container, the light theme will always be used, regardless of the value of this property.

If you specify an interfaceStyle of “Automatic” on versions of iOS prior to 13, the light theme will always be used. iOS 13 will apply the correct theme depending on the user’s preference in their system settings if you specify an interfaceStyle of “Automatic”.

Android​

Available in SDK version 0.18.0 and above

Stream containers and single card views expose an interfaceStyle property, which can be set to one of three values:

  • AACInterfaceStyle.AUTOMATIC: If the user's device is currently set to light mode, the stream container will use the light (default) theme. If the user's device is currently set to dark mode, the stream container will use the dark theme. On Android versions that don't support night mode, this setting is equivalent to AACInterfaceStyle.LIGHT.
  • AACInterfaceStyle.LIGHT: The stream container will always render in light mode, regardless of the device setting.
  • AACInterfaceStyle.DARK: The stream container will always render in dark mode, regardless of the device setting.

If you do not specify a dark theme on your stream container, the light theme will always be used, regardless of the value of this property.

Web​

Available in SDK version 0.18.0 and above

The interface style (interfaceStyle) property, on the stream container configuration object, determines which theme is rendered:

  • automatic: If the user's device is currently set to light mode, the stream container will use the light (default) theme. If the user's device is currently set to dark mode, the stream container will use the dark theme (or fallback to the light theme if this has not been configured). If the stream container does not have a dark theme configured, the light theme will always be used.
  • light: The stream container will always render in light mode, regardless of the device setting.
  • dark: The stream container will always render in dark mode, regardless of the device setting.

To change the interface style, set the corresponding value for the interfaceStyle property on the configuration object when creating the stream container.

Last updated on