SDK theming

By default, all Monite components use the default component styling. However, there may be scenarios where you might want to customize this default styling to match the look and feel of your website's design or brand identity.

While the fundamental layouts of these Monite components are immutable, you can customize other component properties like colors, fonts, borders, e.t.c.

Overview

The Monite React SDK leverages Material UI to deliver a robust and dynamic theming mechanism that allows you to tailor the SDK's appearance to suit your application's unique style and branding.

A theme in Material UI is an object that specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.

Theming mechanism

To customize components, you must use Material UI's deepmerge function imported from the @mui/utils subpackage. The @mui/utils package is automatically available when you download the React SDK package.

The deepmerge function takes two themes as arguments and merges them to create a new one based on them.

import { defaultMoniteLightThemeOptions } from "@monite/sdk-react";
import { deepmerge } from "@mui/utils";

const customTheme = deepmerge(defaultMoniteLightThemeOptions, CUSTOM_THEME_OBJECT)

The first argument—defaultMoniteLightThemeOptions—provides the default styling and theme for the React SDK components. The second argument is your theme object, where you specify your customized styling values. For more information, see Material UI theme.

Finally, pass the newly generated theme object using the theme prop on the MoniteProvider wrapper as shown:

import { defaultMoniteLightThemeOptions, MoniteProvider } from "@monite/sdk-react";
import { deepmerge } from "@mui/utils";

const customTheme = deepmerge(defaultMoniteLightThemeOptions, {
  palette: {
    ...
   },
  typography: {
    ...
  }
});

...

return (
  <MoniteProvider theme={customTheme}>
   ...
  </MoniteProvider>
);

The React SDK has default values for all component properties. You can update component properties using Material UI's theme variables within your theme object. This document only covers the most important theme variables. See the Material UI theming documentation for the complete list of variables.

• .palette: the .palette object allows you to modify the color of the components to suit your brand design or identity. For more information, see Palette.
• .typography: the .typography object handles text appearance for your components. This includes, font sizes, weights, line heights, letter spacings, e.t.c. for all components. For more information, see Typography.

Usage example

The following snippet shows an example theme object with detailed palette and typography objects:

import { defaultMoniteLightThemeOptions, MoniteProvider } from "@monite/sdk-react";
import { deepmerge } from "@mui/utils";

const customTheme = deepmerge(defaultMoniteLightThemeOptions, {
  palette: {
    mode: "light",
    primary: {
      main: "#42a5f5",
      contrastText: "#fff",
    },
    background: {
      paper: "#e3f2fd",
    },
    text: {
      primary: "#000",
      secondary: "#000",
    },
    success: {
      main: "#1fb42b",
      contrastText: "#fff"
    },
  },
  typography: {
    fontFamily: "Comic Sans MS, Comic Sans, cursive, monospace",
    h2: {
      fontSize: "26px",
      fontWeight: "500",
    },
    h3: {
      lineHeight: 1.13,
    },
    button: {
      fontSize: "16px",
      fontWeight: "300",
      textTransform: "uppercase",
    },
  },
});

...

function App() {
  return (
    <MoniteProvider theme={customTheme}>
     ...
    </MoniteProvider>
  );
}

export default App

For the full list of variables and their configuration, see the Material UI documentation.