Appearance customization for Components

Mollie Components use CSS Custom Properties (variables) for styling, allowing you to easily customize the look and feel to match your brand. You can apply these styles globally across your entire site, scoped to specific containers, or configured for dark mode.

Global Customization

To apply styles universally across all Mollie components on your site, define the variables on the :root selector in your global CSS stylesheet.

:root {
  --mollie-color-primary-background: #6c2bd9;
  --mollie-color-primary-foreground: #ffffff;
  --mollie-font-family: "'Segoe UI', Tahoma, sans-serif"
  --mollie-font-size: 17px;
}

Scoped Customization

To style a specific instance of a component without affecting others, define the variables on the element which mounts the component. You can use a CSS class, ID or inline style.

#card-component {
  --mollie-color-primary-background: #6c2bd9;
  --mollie-color-primary-foreground: #ffffff;
  --mollie-font-family: "'Segoe UI', Tahoma, sans-serif"
  --mollie-font-size: 17px;
}

Inline style approach:

<div style="--mollie-color-primary-background: #6c2bd9; --mollie-color-primary-foreground: #ffffff;"></div>

Dark mode

Dark mode can be handled using OS-level system preferences, explicit class/attribute toggles, or both.

OS System Preference

Use the @media (prefers-color-scheme: dark) media query to automatically switch variables based on the user's system settings.

/* Default / Light Mode */
:root {
  --mollie-color-primary-background: #6c2bd9;
  --mollie-color-primary-foreground: #ffffff;
  --mollie-font-family: "'Segoe UI', Tahoma, sans-serif"
  --mollie-font-size: 17px;
}

/* Media query approach */
@media (prefers-color-scheme: dark) {
  :root {
    --mollie-color-scheme: dark;
    --mollie-color-primary-background: #ffffff;
    --mollie-color-primary-foreground: #6c2bd9;
  }
}

Class or Data-Attribute Toggle

If your app supports a manual dark mode toggle, scope the variables to a class or data-theme attribute on the or tag.

/* Class-based approach */
.dark-mode {
  --mollie-color-primary-background: #ffffff;
  --mollie-color-primary-foreground: #6c2bd9;
}

/* Data-attribute approach */
[data-theme="dark"] {
  --mollie-color-primary-background: #ffffff;
  --mollie-color-primary-foreground: #6c2bd9;
}

Variables

Below a list of all the variables that can be customized. Mollie Components may derive more detailed values automatically ensuring consistency.

Colors

All valid CSS color values are accepted, such as Hex, RGB, HSL and OKLCH.

Typography

Layout