OTTODesign System

Code

Theming

Storybook group: Development · Sidebar path: Development/Theming · Extracted 28.09.2026

Overview

Source: ./src/documentation/development/theming.mdx

Theming

OTTO Components adapt to different themes through design tokens. This page explains how OTTO Components handle theming and how to make your own feature or component compatible.

Skip to:

How theming works in OTTO Components

OTTO Components provide light and dark themes out of the box by utilizing design tokens.

  • Each theme defines its own values for the design tokens.
  • Switching the theme automatically switches the token values.

This way, all components that use design tokens automatically adapt to the active theme. This includes colors, shadows, and other properties defined via design tokens.

How to enable theming in your project

Features and components built with OTTO Components support theming (including dark mode) automatically because all OTTO Components use design tokens for styling, which adapt to the active theme. If you are not using OTTO Components to build your own feature or local component, you can still support theming and dark mode by using the semantic design tokens. If the current set of semantic tokens does not cover your use case, you can also use the mixin for dark themes to create custom dark mode styles.

Note

Do not use base tokens or hard-coded color values because they do not adapt to the currently active theme.

For guidance on how to use design tokens in your own feature or component, see the Use design tokens in your codebase documentation.

Try Dark Mode

In Storybook, use the theme control in the upper toolbar to switch modes.

Note: This also changes modes in develop.otto.de

You can try dark mode on develop.otto.de (VPN required):

  • Use the sticky toggle in the top-right corner to switch between light and dark themes.
  • The toggle is visible only at the XXL breakpoint (≥ 77 rem or 1,232 px).
  • When toggling themes, the design tokens detect the current theme and provide the corresponding values.

Note

Dark mode is in beta and may be subject to changes.

Feedback

If you encounter issues or have suggestions about theming or dark mode, do one of the following: