SDK theming

All Monite components use the default component styling by default. However, there may be scenarios where you 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, such as colors, fonts, borders, etc.

Overview

The Monite React SDK leverages Material UI to deliver a robust and dynamic theming mechanism. This mechanism 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, pass your custom theme object to the React SDK using the theme prop on the MoniteProvider wrapper as shown:

import { MoniteProvider } from "@monite/sdk-react";

const customTheme = {
  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 spacing, etc., 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 { MoniteProvider } from "@monite/sdk-react";

const customTheme = {
  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.