Themes

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

• Select your desired theme. Choose from default,
• Toggle theme between light and dark mode.
• Toggle whether the theme is panelless.

Header

• Select Header view: basic or advanced.
  • Advanced header view enables you to edit
    • Header height, width inference (preference center or container), and text area width.
    • Background color and image.
    • Toggle header overlap with first field.
    • Page title and description font opacity.
    • Additional logo positioning options: vertical positioning and horizontal centering.
• Logo position: left or right
• Page title font and formatting.
• Page description font and formatting.

Background

• Set background color: hex code or choose from selection.
• Background image and related display settings.

Appearance

• Accent color: hex code or choose from provided selection.
• Panel, question box, and input element opacity.
• Page font family and font size.
• Page scale factor and corner radius.

Appearance (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 and opacity settings for hover and selected.
• Accent foreground color for default and disabled, and opacity settings for each.
• Error message colors: font color and opacity, background color and opacity.

Page

• Set title font, styling, color, opacity, and size.
• Set description font, styling, color, opacity, and size.

Field Box

• Background and corner radius default and hover color, opacity, and radius settings for field boxes.
• 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 and style settings.
• Description font and style settings.

Input Element

• Background and corner radius default and hover color, opacity, and radius settings for input elements.
• 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.
• Input element font and styling settings.

Lines

• Color and opacity settings for darker and lighter lines.