Ask Moov Beta
Generative AI is experimental and can make mistakes.
Guides Use cases
SDKs & UIs
API Changelog
  1. Moov.js
  2. Moov Drops

Themes

Customize the look of Moov Drops to match your brand.

Moov Drops are custom web components you can add to your page the same way you would add any HTML tag. Moov Drops are defined in the Moov.js package. After initializing Moov.js, you will have access to our full library of Drops.

Every Moov Drop shares a color palette defined through a handful of CSS variables. You can edit these variables to alter the look of any Drop on the page, and create a seamless visual experience for your users.

Moov Drops require a secure HTTPS connection. If you don’t have a test environment with HTTPS enabled, we suggest setting up a hosting environment with ngrok, Netlify, or Vercel.

How to use

To override the Moov Drops color palette, add a style or link tag within the body of your webpage.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<html>
  <head></head>
  <body>
    <style>
      :root {
        /* Moov theme overrides */
      }
    </style>
    <moov-payment-methods></moov-payment-methods>
  </body>
<html>
The default Drops palette is defined in the head of the document. To ensure that your custom colors override the default palette, they must be placed in the body tag or with greater specificity.

In your style tag, target the :root and provide custom values for any or all of our predefined CSS variables.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

:root {
  --moov-color-background: #111111;
  --moov-color-background-secondary: #222222;
  --moov-color-background-tertiary: #333333;
  --moov-color-primary: #77D656;
  --moov-color-secondary: #79F0AA;
  --moov-color-tertiary: #4F4F4F;
  --moov-color-info: #94CBFF;
  --moov-color-warn: #F2994A;
  --moov-color-danger: #EB5757;
  --moov-color-success: #77D656;
  --moov-color-low-contrast: #969696;
  --moov-color-medium-contrast: #E0E0E0;
  --moov-color-high-contrast: #FFFFFF;
  --moov-color-graphic-1: #79F0AA;
  --moov-color-graphic-2: #D194E9;
  --moov-color-graphic-3: #68B2FD;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

:root {
  --moov-color-background: #25262D;
  --moov-color-background-secondary: #2D3037;
  --moov-color-background-tertiary: #3A3C45;
  --moov-color-primary: #6171F9;
  --moov-color-secondary: #828FFE;
  --moov-color-tertiary: #494A57;
  --moov-color-info: #94CBFF;
  --moov-color-warn: #EB5757;
  --moov-color-danger: #ED655C;
  --moov-color-success: #62E599;
  --moov-color-low-contrast: #9294A0;
  --moov-color-medium-contrast: #EBEBEF;
  --moov-color-high-contrast: #FFFFFF;
  --moov-color-graphic-1: #62E599;
  --moov-color-graphic-2: #62E599;
  --moov-color-graphic-3: #62E599;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

:root {
  --moov-color-background: #FFFFFF;
  --moov-color-background-secondary: #F5F6F9;
  --moov-color-background-tertiary: #E7E7F1;
  --moov-color-primary: #4A5CF5;
  --moov-color-secondary: #3D50EC;
  --moov-color-tertiary: #B9BBC3;
  --moov-color-info: #94CBFF;
  --moov-color-warn: #EB5757;
  --moov-color-danger: #EA0F43;
  --moov-color-success: #62E599;
  --moov-color-low-contrast: #5B5D6A;
  --moov-color-medium-contrast: #494A57;
  --moov-color-high-contrast: #000000;
  --moov-color-graphic-1: #3D50EC;
  --moov-color-graphic-2: #3D50EC;
  --moov-color-graphic-3: #3D50EC;
}
Summary Beta