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

# Theming

> Style your app in light mode and dark mode.

Microapp provides SDKs to manage the user's theme mode, and then passes it to your microapp so that you can style content accordingly.

Here is how you can use the theme in your microapp:

## React

### 1. Install the SDK

Install the SDK with your preferred package manager.

<CodeGroup>
  ```bash npm theme={null}
  npm install @microapp-io/react
  ```

  ```bash yarn theme={null}
  yarn add @microapp-io/react
  ```

  ```bash pnpm theme={null}
  pnpm add @microapp-io/react
  ```
</CodeGroup>

### 2. Wrap Your App with the Provider

We provide a UserPreferencesProvider to wrap your application.

```typescript theme={null}
import { UserPreferencesProvider } from '@microapp-io/react';

const Component = () => {
  return (
    <UserPreferencesProvider>
      {/* Your application code */}
    </UserPreferencesProvider>
  );
};
```

### 3. Access the Theme

You can use the hook function to retrieve the user's theme.

```typescript theme={null}
import { useTheme } from '@microapp-io/react';

const Component = () => {
  const theme = useTheme();

  return (
    <div>
      <p>Theme: {theme}</p>
    </div>
  );
};
```

## Vanilla Typescript

### 1. Install the User Preferences SDK

Install the SDK with your preferred package manager.

<CodeGroup>
  ```bash npm theme={null}
  npm install @microapp-io/user-preferences
  ```

  ```bash yarn theme={null}
  yarn add @microapp-io/user-preferences
  ```

  ```bash pnpm theme={null}
  pnpm add @microapp-io/user-preferences
  ```
</CodeGroup>

### 2. Import and Initialize the SDK

To use the User Preferences SDK in your code, import it in any file where you need to use it.

```typescript theme={null}
import { UserPreferences } from '@microapp-io/user-preferences';

// Production initialization
const userPreferences = new UserPreferences();

// Sandbox initialization with custom preferences
const userPreferences = new UserPreferences({
  sandbox: {
    theme: 'dark',
  },
});
```

When developing locally, you can use the sandbox configuration to test different user preferences. In production, initialize without any parameters to automatically detect the user's preferences.

### 3. Getting the User Preferences values

You can use the getPreferences function to retrieve the user's preferences.

```typescript theme={null}
const { theme } = userPreferences.getPreferences();
```

### 4. Listen to updates

The User Preferences SDK provides a way to listen to updates to the user's preferences. You can use the onPreferencesChange function to listen to changes to the user's preferences.

```typescript theme={null}
userPreferences.onUpdate((newPreferences) => {
  microappTheme = newPreferences?.theme;
});
```

### Full Code in sandbox mode

```typescript theme={null}
const userPreferences = new UserPreferences({
  sandbox: {
    theme: 'dark',
  },
});

let { theme: microappTheme } = userPreferences.getPreferences();

userPreferences.onUpdate((newPreferences) => {
  microappTheme = newPreferences?.theme;
});
```

It's as easy as that!