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.

npm

npm install @microapp-io/react

2. Wrap Your App with the Provider

We provide a UserPreferencesProvider to wrap your application.

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.

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.

npm

npm install @microapp-io/user-preferences

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.

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.

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.

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

Full Code in sandbox mode

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

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

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

It’s as easy as that!