Drop-in theming

By default, the Drop-in SDK uses Monite's default 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 Drop-in 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 the SDK, you must define your theme object within the script tag in your file. The script tag that contains your custom theme is assigned an slot attribute with a value of theme as shown:

<script slot="theme" type="application/json">
  {
    "palette": {
      ...
    },
    "typography": {
      ...
    }
  }
</script>

📘

The script tag containing the theme object must be a child of the Drop-in SDK's monite-app element.

The Drop-in SDK has default values for all properties. You can update 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.

📘

To successfully update properties, the theme object that contains your custom theming must be JSON-compliant.

Usage example

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

<script slot="theme" type="application/json">
  {
    "palette": {
      "mode": "light",
      "primary": {
        "main": "#42a5f5"
      },
      "background": {
        "paper": "#e3f2fd"
      },
      "success": {
        "main": "#1fb42b",
        "contrastText": "#fff"
      },
      "text": {
        "primary": "#000",
        "secondary": "#000"
      }
    },
    "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"
      }
    }
  }
</script>

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