Theming

Match the configurator to your brand with CSS variables. Change colors, fonts, and styling without writing custom CSS or modifying source code.

How theming works

The configurator reads CSS variables from its container element. Set these variables to override the default Deep Fathom styling:

<div
  data-deep-fathom-onramp
  data-partner-id="your-partner-id"
  style="
    --deep-fathom-primary: #0b5fff;
    --deep-fathom-bg: #ffffff;
    --deep-fathom-text: #1a1a1a;
  "
></div>

The configurator automatically picks up these values and applies them throughout the interface.

Theme modes

Control how the configurator resolves theme values:

Mode	Behavior
auto	Use partner CSS variables when present, fall back to Deep Fathom defaults (recommended)
partner	Require partner CSS variables; show error if missing
df	Ignore partner variables; always use Deep Fathom defaults

Set the mode with data-theme-mode:

<div
  data-deep-fathom-onramp
  data-partner-id="your-partner-id"
  data-theme-mode="auto"
></div>

For most integrations, leave this unset—auto mode provides the best experience.

CSS variables

Colors

Variable	Description	Default
--deep-fathom-primary	Primary brand color (buttons, links, accents)	#3e63dd
--deep-fathom-secondary	Secondary color (hover states, borders)	#849dff
--deep-fathom-bg	Background color	#0f1216
--deep-fathom-text	Primary text color	#f5f7fb
--deep-fathom-muted	Secondary/muted text	#6b7280
--deep-fathom-border	Border color	rgba(255,255,255,0.08)

Typography

Variable	Description	Default
--deep-fathom-font	Font family	'Outfit', sans-serif

Styling

Variable	Description	Default
--deep-fathom-radius	Border radius	12px
--deep-fathom-shadow	Box shadow	0 4px 16px rgba(0,0,0,0.36)

Examples

Light theme

<div
  data-deep-fathom-onramp
  data-partner-id="your-partner-id"
  style="
    --deep-fathom-primary: #0066cc;
    --deep-fathom-secondary: #004999;
    --deep-fathom-bg: #ffffff;
    --deep-fathom-text: #1a1a1a;
    --deep-fathom-muted: #666666;
    --deep-fathom-border: rgba(0,0,0,0.1);
  "
></div>

Match your brand colors

<!-- Example: Acme Security brand -->
<div
  data-deep-fathom-onramp
  data-partner-id="acme-security"
  style="
    --deep-fathom-primary: #e63946;
    --deep-fathom-secondary: #ff6b6b;
    --deep-fathom-font: 'IBM Plex Sans', sans-serif;
  "
></div>

Using a CSS class

For cleaner markup, define variables in a CSS class:

/* In your stylesheet */
.onramp-theme {
  --deep-fathom-primary: #0b5fff;
  --deep-fathom-secondary: #3d7eff;
  --deep-fathom-bg: #f8fafc;
  --deep-fathom-text: #1e293b;
  --deep-fathom-muted: #64748b;
  --deep-fathom-border: #e2e8f0;
  --deep-fathom-radius: 8px;
  --deep-fathom-font: 'Inter', sans-serif;
}

<div
  data-deep-fathom-onramp
  data-partner-id="your-partner-id"
  class="onramp-theme"
></div>

Programmatic theming

When using the JavaScript API, pass theme values in the config:

import { mount } from '@onramp-kit/sdk';

mount('#configurator', {
  partnerId: 'your-partner-id',
  theme: {
    mode: 'auto',
    variables: {
      primary: '#0b5fff',
      secondary: '#3d7eff',
      bg: '#ffffff',
      text: '#1a1a1a',
      font: "'Inter', sans-serif",
    },
  },
});

Accessibility

When customizing colors, ensure sufficient contrast for readability:

• Text on background: Minimum 4.5:1 contrast ratio (WCAG AA)
• Interactive elements: Minimum 3:1 contrast ratio
• Focus indicators: Visible focus states on all interactive elements

Testing contrast

Use these tools to verify your color choices:

• WebAIM Contrast Checker
• Colour Contrast Analyser
• Browser DevTools accessibility panel

Example: Accessible light theme

<div
  data-deep-fathom-onramp
  data-partner-id="your-partner-id"
  style="
    --deep-fathom-primary: #0055cc;    /* 7.2:1 on white */
    --deep-fathom-bg: #ffffff;
    --deep-fathom-text: #1a1a1a;       /* 16:1 on white */
    --deep-fathom-muted: #595959;      /* 7:1 on white */
  "
></div>

Limitations

• Global CSS doesn't apply — The configurator runs in an isolated context (Shadow DOM or iframe). Only CSS variables on the container element are inherited.
• Some elements can't be styled — Internal component structure may change between versions. Stick to the documented CSS variables for stable theming.
• Font loading — If using a custom font, ensure it's loaded on your page before the configurator initializes.

Troubleshooting

Theme not applying

1. Check variable names — Must match exactly (e.g., --deep-fathom-primary, not --deepfathom-primary)
2. Verify placement — Variables must be on the container element with data-deep-fathom-onramp
3. Check iframe mode — In iframe mode, variables are passed at initialization; dynamic changes won't apply

Colors look different

• Color space differences — Some browsers render colors slightly differently. Test in multiple browsers.
• Transparency issues — Use solid colors for --deep-fathom-bg for consistent results

Font not loading

• Ensure the font is loaded via @font-face or a font service (Google Fonts, Adobe Fonts)
• Load fonts before initializing the configurator
• Use web-safe fallbacks: 'Custom Font', -apple-system, sans-serif

Next steps

• Embedding guide — Full configuration options
• Events reference — Track visitor interactions