> ## Documentation Index
> Fetch the complete documentation index at: https://docs.microapp.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Apply light and dark themes to your microapp.

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:

<CardGroup>
  <Card title="React SDK" icon="react" href="/core-concepts/theming/react">
    Implement theming in React microapps.
  </Card>

  <Card title="TypeScript SDK" icon="code" href="/core-concepts/theming/typescript">
    Implement theming in any web framework.
  </Card>
</CardGroup>

## 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