The Theming SDK enables you to respond to user theme preferences, providing a consistent experience across light and dark modes.

​
Getting Started

To get started with theming in your microapp, choose the SDK that matches your frontend framework:

React SDK

Implement theming in React microapps.

TypeScript SDK

Implement theming in any web framework.

​
Key Features

The Theming SDK provides:

  • Automatic theme detection: Automatically detects the user’s system theme preference
  • Theme overrides: Allows users to override their system preference specifically for your microapp
  • Theme change listeners: Notifies your app when the theme changes
  • Sandbox mode: Makes it easy to test different themes during development

​
Best Practices for Theming

When implementing theming in your microapp, follow these best practices:

  1. Use semantic color variables rather than hard-coded colors
  2. Ensure sufficient contrast in both light and dark modes
  3. Test interactive elements in both themes
  4. Consider transition animations when the theme changes
  5. Initialize with the correct theme immediately to avoid flashing of incorrect styles