Theme

Theme

Configure the shared design foundation used by Sprocket Rocket pages and modules.

The Sprocket Rocket theme gives an installation its shared design foundation: theme settings for colors, typography, buttons, forms, containers, and spacing, plus page, blog, and system templates and the global site header and footer.

The installation's Theme drawer shows the theme settings captured from HubSpot and when they were last captured. Select Capture Theme to read the current values again. The Fields tab lists each setting, and the fields.json tab has the full file with Copy fields.json. The drawer is read-only. Change settings in HubSpot's theme editor, or ask Sprocket Rocket AI for a brand change.

Theme drawer with Capture Theme, the Fields and fields.json tabs, and captured color settings

Change the brand with Sprocket Rocket AI

Sprocket Rocket AI can propose a new brand for the theme: colors, fonts, heading sizes, buttons, and corner radius. It previews the brand on the page you're on and shows a Theme brand change card. Select Review to compare each setting before and after, then Apply to theme, Discard, or Keep previewing. Organization owners and admins can Undo an applied brand from the card. For a brand that belongs to one page only, it sets page-only brand styles instead of changing the theme. See Change the theme brand.

The Review theme brand dialog with before and after values, notes, and Apply to theme, Discard, and Keep previewing

Theme settings

Set shared colors, type, buttons, forms, and spacing.

Header and footer

Configure shared site navigation and footer content.

Templates

Work with page, blog, system, and subscription templates.

Custom code

Add site-wide CSS and brand fonts.

Billing, usage, and credits

Manage your subscription, AI usage, licenses, and prepaid module credits.

Theme settings overview

Control shared styles across pages that use the Sprocket Rocket theme.