Themes
DropAFinder ships 16 curated themes. Each one is a complete color set covering every token in the visitor-facing widget — listing card backgrounds, search button, input field, filter chips, tag pills, map markers, borders. Every default theme passes WCAG 2.1 AA contrast on every audited color pair.
This page is the gallery and reference. For the workflow of switching themes inside the builder, see the Theme & colors feature page. To override individual colors after picking a theme, see Custom colors.
How to pick
Themes are organized into four mood groups:
| Group | Vibe | Use when… |
|---|---|---|
| Light | Clean, airy, neutral | Most B2B / professional services finders |
| Bold | Saturated accents on neutrals | Consumer brands, food and drink, retail |
| Dark | Inverted palette, dark surfaces | Premium / luxury / “always-dark” host sites |
| Warm | Earth tones, low contrast accents | Hospitality, wellness, lifestyle |
💡 Tip: Pick a theme by mood first, then evaluate brand fit. Trying to color-match your brand exactly through a theme almost always means you should start with a Light theme and use Custom colors instead.
🟡 [SCREENSHOT: Change theme drawer fully open showing all 16 cards arranged in their four mood groups, with the WCAG AA banner across the top.]
The roster
The names below are the in-product theme names. Each row sketches the theme at a glance; the actual swatches live in the Change theme drawer in the builder.
Light
| Theme | Notes |
|---|---|
| Signal | Default starting theme. White surfaces, blue accents, dark text. The neutral that flatters most brands. |
| Coastal | Soft cream surfaces with teal/blue accents. Reads “near the water.” |
| Sand | Warm off-white surfaces with brown accents. Quiet, editorial. |
| Sky | Cool grey surfaces with sky-blue accents. Bright but not aggressive. |
Bold
| Theme | Notes |
|---|---|
| Amber | Off-white surfaces with bright amber/orange accents. High visual energy. |
| Berry | Light surfaces with magenta/berry accents. Distinctive and warm. |
| Citrus | Light surfaces with lime/yellow accents. Reads young and informal. |
| Lavender Slate | Light surfaces with lavender + slate gray. Slightly editorial; pairs well with serif type. |
Dark
| Theme | Notes |
|---|---|
| Charcoal | Near-black surfaces, white text, neutral accents. The “dark mode default.” |
| Graphite | Slightly warmer dark surfaces with cool accents. Reads premium. |
| Midnight | True black surfaces with deep blue accents. Highest-contrast dark theme. |
| Spruce | Deep green surfaces with sage accents. Feels outdoorsy. |
Warm
| Theme | Notes |
|---|---|
| Forest | Mid-green surfaces with cream text. “Outdoors brand” baseline. |
| Rose Clay | Muted pink/clay surfaces with deep red accents. Warm and grounded. |
| Evergreen | Olive surfaces with deep green accents. Earthy. |
| Terracotta | Warm orange-brown surfaces with cream accents. Mediterranean / artisanal. |
What a theme contains
Each theme defines values for these color tokens (used across every widget element):
- Surface colors — listing card background, panel background, body background
- Foreground colors — primary text, secondary text, muted text
- Accent colors — search button, primary action, link, focus ring
- Input colors — input background, border, placeholder, text
- Filter colors — filter chip background, active state, hover state
- Tag colors — tag pill background, text, border
- Map colors — marker fill, marker stroke, cluster background
- Borders — generic border, divider, separator
When you switch themes, every one of these flips. There’s no partial-theme application.
The WCAG guarantee
All 16 themes are designed and tested so that every meaningful color pair (text on background, button text on button background, marker on map, etc.) meets the WCAG 2.1 AA contrast threshold. The thresholds:
- 4.5:1 for normal-sized body text
- 3:1 for large text and UI components
This guarantee holds for the default values of each theme. The moment you override a color via Custom colors, the live WCAG checker recomputes contrast across all affected pairs and warns if any drop below threshold.
💡 Tip: “Passes WCAG 2.1 AA” is meaningful but not exhaustive. Themes are designed for legibility; they don’t automatically guarantee that your specific Custom Field labels or tags will be readable — those depend on what you put in them.
Switching themes
In the Finder Builder:
- Open the Theme & colors page (under Look & Feel)
- Click Change theme on the summary card
- Pick a card in the drawer
- Save
The Live Preview updates immediately. Your existing customizations to refinements, layout, typography, and copy are preserved — only the color tokens change.
🟡 [SCREENSHOT: Theme summary card after selecting a new theme — preset name, color swatch chips, font sample, and the green “Passes WCAG 2.1 AA” pill all visible.]
Edge cases
- Custom colors override the theme. If you’ve previously customized colors and then switch themes, your custom values are not overwritten. They take precedence over the new theme’s defaults. To reset, open Custom colors and use “Reset all” or pick the desired theme cleanly from a fresh finder.
- Map provider colors. The map’s tile colors come from the map provider (TomTom, Mapbox, etc.), not from the theme. A “dark” theme paired with a light tile style will look mismatched. Pair Dark themes with the dark variant of your map provider.
- Image colors. Location images are not recolored by themes. A bright product photo on a Charcoal theme is still bright.
Where to next
- Override individual colors: Custom colors
- Pair theme with type: Typography customization
- Pair theme with map style: Map providers
- See themes in the workflow: Theme & colors feature