Skip to main content
Docs/Branding/Theme Gallery

Theme Gallery

Browse preset themes or create custom themes to match your brand.

How Themes Work

The Theme Gallery lets you customize how your embedded calculators look. Each domain can have its own theme applied, giving you complete control over branding across different websites.

5 Preset Themes

Start with professionally designed themes ready to use immediately.

Custom Themes

Create your own themes with the Brand Builder for full customization.

Community Themes

Browse and apply themes shared by other MortgageMate users.

Preset Themes

Five professionally designed themes are included with every subscription. Each has a distinct personality suited for different brand types.

Professional

Clean and corporate with navy accents

Best for: Financial institutions, professional services

Modern

Dark mode with vibrant gradients

Best for: Tech companies, fintech, modern brands

Minimal

Ultra-clean with subtle touches

Best for: Luxury brands, minimalist design

Bold

High contrast with punchy colors

Best for: Startups, youth-focused brands

Elegant

Sophisticated with muted tones

Best for: Wealth management, luxury real estate

What Themes Control

Each theme defines a complete visual system for your calculators:

PropertyDescription
ColorsBackground, text, primary buttons, success/warning/error states, borders, inputs
TypographyFont family, font sizes, font weights for headings and body text
Border RadiusCorner rounding for cards, buttons, inputs, and badges
ShadowsDrop shadows for cards and elevated elements
Chart ColorsColor palette for pie charts and graphs in results
Highlight StylingGradient or solid background for the main result block

Applying a Theme

1

Open Theme Gallery

Navigate to Theme Gallery from your dashboard sidebar.
2

Select Your Domain

Choose which domain you want to apply the theme to from the left panel.
3

Browse Themes

Use the tabs to explore:
  • Presets — 5 built-in professional themes
  • My Themes — Custom themes you've created
  • Community — Themes shared by other users
4

Preview the Theme

Click any theme to see a live preview. Use the Expand button for a larger view.
5

Apply to Domain

Click "Apply to Domain" to save your selection. Changes take effect immediately.

Per-Domain Themes

Each domain can have a different theme. This is useful if you manage calculators for multiple clients or websites with different brand requirements.

Theme Preview

Before applying a theme, you can preview exactly how your calculators will look.

Thumbnail Preview

Each theme shows a compact preview thumbnail with sample calculator inputs, buttons, and result styling.

Expanded Preview

Click "Expand" to see a full-size preview showing all UI elements including form fields, buttons, results, and status badges.

Managing Active Themes

The gallery makes it easy to see which theme is currently applied to each domain.

Visual Indicators:

  • Active badge — Shows on themes currently applied to the selected domain
  • Checkmark ring — Highlights your currently selected theme
  • Domain list — Shows the theme name under each domain

Ready to customize your calculators?

Open the Theme Gallery in your dashboard to start applying themes.

Go to Theme Gallery