Theme settings
Theme settings style the whole site at once: colors, fonts, buttons and forms, in light and dark mode.
Open them from SettingsContentThemesEdit theme settings, or from any page in the editor under ThemeTheme settings. Changes show in the preview straight away and go live on every page when you publish them.
Groups
- Style preset
- Color mode
- Light mode colors
- Dark mode colors
- Typography
- Eyebrow
- Layout
- Scroll to top
- Buttons
- Header and footer
- Forms
Tip
A preset changes colors and fonts, but not your logo, layout or content. Try a few presets on a draft page before you pick one. Turn off Use the preset's fonts to keep your own fonts.
Style preset
Start here. A preset sets the light and dark colors and a matching font pair in one click. Choose Custom to use your own colors below.
| Setting | Type | What it does |
|---|---|---|
| Preset | Choice | Each preset sets both the light and the dark palette, so Color mode, dark sections and the header and footer modes keep working. Module color settings (highlight colors and so on) still override it.Options: Custom (use the settings below)Indigo Original: the theme's original lookOcean Corporate: trustworthy enterprise and B2BEmerald Growth: fintech, health and sustainabilityMidnight Enterprise: serious, technical and enterprise softwareCoral Startup: energetic consumer and startup brandsViolet Pop: bold product launches and creative SaaSTeal Modern: analytics, AI and data productsAmber Consulting: agencies, consulting and professional servicesDefault: Custom (use the settings below) |
| Use the preset's fonts | On/off | Turn off to keep your own fonts from Typography while using the preset's colors.Default: On |
Color mode
Pick light, dark, or follow the visitor’s device. The header and footer can use their own mode, and every section can override it in its Styles tab.
| Setting | Type | What it does |
|---|---|---|
| Site color mode | Choice | Sections set to "Same as site" follow this. "Match the visitor's device setting" shows dark mode to visitors whose device is set to dark.Options: LightDarkMatch the visitor's device settingDefault: Light |
| Header color mode | Choice | Options: Same as siteLightDarkDefault: Same as site |
| Footer color mode | Choice | Options: Same as siteLightDarkDefault: Same as site |
Light mode colors
The palette used in light mode. Every module reads these colors, so you rarely need to set colors per section.
| Setting | Type | What it does |
|---|---|---|
| Primary brand color | Color | Eyebrows, icons and accents.Default: #4F46E5 |
| Secondary brand color | Color | Default: #1E1B4B |
| Accent color | Color | Default: #8B5CF6 |
| Heading text | Color | Default: #111827 |
| Body text | Color | Default: #4B5563 |
| Muted text | Color | Captions, descriptions and small labels.Default: #6B7280 |
| Page background | Color | Default: #FFFFFF |
| Alternate section background | Color | Default: #F8FAFC |
| Card background | Color | Cards, dropdowns, FAQ items and pop-ups.Default: #FFFFFF |
| Borders and dividers | Color | Default: #E5E7EB |
| Button background | Color | Default: #4F46E5 |
| Button text | Color | Default: #FFFFFF |
| Button background on hover | Color | Default: #1E1B4B |
| Link text | Color | Default: #4F46E5 |
| Link text on hover | Color | Default: #1E1B4B |
| Header background | Color | Default: #FFFFFF |
| Header text and menu links | Color | Default: #111827 |
| Footer background | Color | Default: #F8FAFC |
| Footer text | Color | Default: #4B5563 |
| Success color | Color | Check marks and positive states.Default: #10B981 |
| Error color | Color | Default: #EF4444 |
Dark mode colors
The same palette for dark mode. It is used when the site, the header or footer, or a section is set to Dark.
| Setting | Type | What it does |
|---|---|---|
| Primary brand color | Color | Eyebrows, icons and accents.Default: #818CF8 |
| Secondary brand color | Color | Default: #C7D2FE |
| Accent color | Color | Default: #A78BFA |
| Heading text | Color | Default: #F9FAFB |
| Body text | Color | Default: #D1D5DB |
| Muted text | Color | Captions, descriptions and small labels.Default: #9CA3AF |
| Page background | Color | Default: #111827 |
| Alternate section background | Color | Default: #1F2937 |
| Card background | Color | Cards, dropdowns, FAQ items and pop-ups.Default: #1F2937 |
| Borders and dividers | Color | Default: #374151 |
| Button background | Color | Default: #6366F1 |
| Button text | Color | Default: #FFFFFF |
| Button background on hover | Color | Default: #818CF8 |
| Link text | Color | Default: #A5B4FC |
| Link text on hover | Color | Default: #C7D2FE |
| Header background | Color | Default: #111827 |
| Header text and menu links | Color | Default: #F9FAFB |
| Footer background | Color | Default: #0B1120 |
| Footer text | Color | Default: #D1D5DB |
| Success color | Color | Check marks and positive states.Default: #10B981 |
| Error color | Color | Default: #EF4444 |
Typography
Body and heading fonts, optional fonts per heading level, and font sizes for desktop, tablet and mobile. Modules can override fonts in their Styles tab.
| Setting | Type | What it does | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Primary font family (e.g. Inter) | Font | Default: Inter | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Heading font family (e.g. Outfit) | Font | Default: Outfit | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Fonts by heading levelGroup · 6 settingsOptional. Leave a level empty to use the heading font above.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Font sizesGroup · 9 settingsMobile is under 768px wide, tablet 768-1023px, desktop 1024px and wider.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Eyebrow
The small label above headings. Sections set to “Same as theme” use this style.
| Setting | Type | What it does |
|---|---|---|
| Default eyebrow style | Choice | Sections set to "Same as theme" use this. Each section can choose its own in its Styles tab.Options: Plain textPill (light tint of the primary color)Gradient badgeDefault: Plain text |
| Plain eyebrow color | Color | Text color for the Plain text style. Leave empty to use the primary brand color. |
| Gradient start color | Color | Leave empty to use the primary brand color. |
| Gradient middle color | Color | Optional. Leave empty for a two-color gradient. |
| Gradient end color | Color | Leave empty to use the accent brand color. |
| Gradient angle | Number | Default: 90 |
| Gradient badge text color | Color | Default: #FFFFFF |
| Badge corner radius | Number | For the Pill and Gradient styles.Default: 6 |
Layout
The page width and the default space between sections.
| Setting | Type | What it does |
|---|---|---|
| Maximum container width (px) | Number | Default: 1280 |
| Section spacing (rem) | Number | Default: 6 |
Scroll to top
A round button that takes visitors back to the top.
| Setting | Type | What it does |
|---|---|---|
| Show scroll-to-top button | On/off | A round button that appears after scrolling down and takes visitors back to the top.Default: On |
| Position | Choice | Options: Bottom rightBottom leftDefault: Bottom right |
Buttons
Shape and font of every button, and whether HubSpot CTAs take the same look.
| Setting | Type | What it does |
|---|---|---|
| Button border radius (px) | Number | Default: 6 |
| Button font | Font | Leave empty to use the body font. |
| Match HubSpot CTAs | On/off | HubSpot CTAs added to a module's button by their ID, and any CTA wrapped in a sf-hs-cta element, take the theme's button look: main buttons filled, second buttons outlined. Turn off to keep each CTA's own design from the CTA editor. Image CTAs always keep their own design.Default: On |
Header and footer
Fonts for the header and footer. Their colors are in Light mode colors and Dark mode colors.
| Setting | Type | What it does |
|---|---|---|
| Header font | Font | Menu, buttons and text in the header. Leave empty to use the body font. |
| Footer font | Font | Leave empty to use the body font. |
Forms
Colors and corner radius for every HubSpot form on the site.
| Setting | Type | What it does |
|---|---|---|
| Form background | Color | Background behind the whole form. Empty: no background. |
| Form border | Color | Border around the whole form. Empty: no border. |
| Label color | Color | Field labels and the required star. |
| Field background | Color | |
| Field border | Color | |
| Field text | Color | |
| Field focus color | Color | Border and glow while a field is in use. |
| Submit button background | Color | |
| Submit button text | Color | |
| Submit button background on hover | Color | |
| Field and button corner radius | Number | Empty: uses the theme button radius. |