Guides API reference Use cases Changelog

Themes

Customize the look of Moov Drops to match your brand.

New to Drops? Start with Drops 101.

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.

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

: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;
  --moov-radius-small: 0.25rem;
  --moov-radius-large: 0.5rem;
}