Guides Use cases
APIs & SDKs
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.

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>
tip
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.

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;
}