The Preference Center's Themes tab is where you can customize your Preference Center page's UI theme.
You can select from a list of provided themes which you can then customize, or you can build themes yourself. Customized themes can be exported as JSON with the export button in the top-menu of the Themes tab, next to the Save button. Exported themes can be imported via the import button.
Changes made to the theme options are immediately reflected in the design area.
The Themes tab contains the following sections and options:
General Theme Settings
The General Theme Settings contains the following properties:
Theme: Choose a default theme for your Subscription Page. You can modify Default Themes, and any modifications will be saved as custom themes, so that you can always return to the default if needed.
Light/Dark: Choose between Light Mode and Dark Mode.
Show Panels: Toggle whether fields outside of panels are panelless.
Header Theme Settings
The Header Theme Settings allow you to modify settings related to your Form's header.
You can use the View button to toggle between Basic and Advanced Header Theme Settings.
The Basic Header Theme Settings give you options for:
Logo Alignment: Choose whether your logo is left-aligned or right-aligned. This option will be grayed out if your Subscription page does not contain a logo.
Page title font: Choose the Subscription Page's Title's font family, weight, and size.
Page description font: Choose the Subscription Page's Description's font family, weight, and size. This option will be grayed out if you have not provided a Page Description.
Toggling on the Advanced Header Settings will present you with this:
The Advanced Header Theme Settings give you options for:
Height: Set header height in pixels. When set to 0, the height is calculated automatically to accommodate the header's content.
Height on smartphones: Set header height in pixels for display on smartphones. When set to 0, the height is calculated automatically to accommodate the header's content.
Content area width: Set the header's content area width to "Same as Page" or "Same as Container". The "Same as Container" option auto-adjusts the header content area width to fit into the HTML element the Form is placed in.
Text Width: Set the width of the header area that contains the Page Title and Description, measured in pixels. When set to 0, the width is calculated automatically to accommodate the header's content.
Background color: Set the header area's background color to None, Accent Color, or Custom.
Background image: Set the header area's background image. Configure the opacity and choose between cover, stretch, contain, and tile fill modes.
Overlap: When enabled, the top of the Subscription Page overlays the bottom of the header.
Page title font: Choose the Page Title's font family, weight, color, opacity, and size.
Page description font: Choose the Page Description's font family, weight, color, opacity, and size. This option will be grayed out if you have not provided a Page Description.
Logo alignment: Set the vertical and horizontal alignment of your Page Logo. This option will be grayed out if you have not provided a Page Logo.
Page title alignment: Set the vertical and horizontal alignment of your Page Title.
Page description alignment: Set the vertical and horizontal alignment of your Page Description. This option will be grayed out if you have not provided a Page Description.
Background Theme Settings
The Background Theme Settings allow you to modify settings related to your Subscription Page's Background.
In the Background Theme Settings you can modify the:
Background color: Set the main background color of the Subscription Page.
Background image: Set a background image for the Subscription Page. Configure the opacity, choose between Auto, Contain, and Cover fill settings, and set whether the background image is fixed or will scroll.
Appearance Theme Settings
In the Appearance Theme Settings you can modify the:
Accent color: Set a supplementary color that highlights key page elements.
Panel and field box opacity: Adjusts the transparency of panels and field boxes relative to the Page's background.
Input element opacity: Adjusts the transparency of input elements relative to the Page's background.
Page font family: Select the primary font used in the Subscription Page.
Page font size: Specify the size of the primary font used in the Subscription Page.
Page scale factor: Specify the Page scale factor.
Corner radius: Sets the corner radius for all rectangular elements.
Appearance Theme Settings (Advanced Mode)
You can toggle the Appearance section's "Advanced Mode" option to enabled Advanced Mode, which gives you access to more granular control over your Theme's appearance properties. Here are the advanced mode properties by section, beginning with at the top:
Appearance
Accent background colors: color and opacity settings for hover and selected.
Accent foreground color: default and disabled, color and opacity settings for each.
Error message colors: font color and opacity, background color and opacity.
Page
Title Font: Page title font styling, color, opacity, and size.
Description Font: Page description font styling, color, opacity, and size.
Field Box
Background and corner radius: Background and corner settings for field boxes: default and hover color, opacity, and radius.
Shadow effect: Shadow effect settings for field boxes: X and Y pixel settings, along with blur, spread, color, and opacity settings. Toggle between drop shadow and inner shadow.
Title font: Page Title font style settings.
Description font: Page Description font and style settings.
Input Element
Background and corner radius: default and hover color, opacity, and radius settings for input elements.
Shadow Effects: Shadow effect settings for input elements: X and Y pixel settings, along with blur, spread, color, and opacity settings. Toggle between drop shadow and inner shadow.
Font: Input element font and styling settings.
Lines
Colors: Color and opacity settings for darker and lighter lines.