Theme

Theme Editor Overview

Users on the Mappica Pro plan can use the Theme Editor to customize the typography, color schemes, and overall styles used in workspace projects. This feature empowers users to create visualizations that are in complete alignment with their organization's branding guidelines.

Once a custom theme is created, it is applied across all projects in a workspace. Visualizations that were previously published remain unchanged until they are republished with the new theme settings.

Only the owners and admins of a Pro workspace can make edits to a workspace theme.

Custom Colors

You can use the Custom Colors section to add colors that align with your organization's brand guidelines. The custom colors you save will be available in all color palettes in your workspace, so you can access them while building visualization elements like charts and maps, as well as when you are styling elements elsewhere in the Theme Editor.

When setting up a custom color, you can specify the total shades of that color that should be saved. A color blending algorithm is used to create evenly spaced shades between the originally selected color and white. These shades are available for selection elsewhere in the Theme Editor as well as in any color palette used when building visualizations.

Separately, the Lookups page allows custom colors (or custom color shades) to be pre-assigned for all projects in a workspace. When the Generate Colors button is used anywhere in the visualization editor, variables matching those added in the Lookups page are assigned the specified color. This can be useful when field names are frequently used in visualizations, and are typically assigned a particular color.

Custom Fonts

In the Font Customization section you can upload custom fonts, such as the official fonts used by your organization. It is important to ensure that fonts are appropriately licensed before uploading them.

Font formats supported by Mappica include ttf, otf, woff, and woff2. You can upload both normal and bold versions of each font.

Visualization Defaults

Use this section to specify default settings used in new visualizations. The items that can be customized include the background color, font color, page margin, gap between sections, maximum page width, and page alignment. Since these are default settings, they can be overridden in any project as needed.

Visualization Elements

Visualization elements can be customized extensively in the Theme Editor, which also previews how each element will be displayed.

The following elements can be styled:

• Map Elements: Define the stroke color and width used on maps.
• Chart Elements: Choose the default colors assigned to fields in charts and set up the default styling of charts, including borders, labels, axis ticks, axis tick labels, and grid lines. Independent and dependent chart axes can be configured separately, allowing greater customization of features like grid lines and borders.
• Table Elements: Style all aspects of the header and body of table elements.
• Text Elements: Specify the formatting of text elements like headings, paragraphs, citations, and hyperlinks. Assign any custom fonts that were uploaded in the Custom Fonts section.
• Labels: Create a common font style for labels used on elements like charts, legends, filters, and selectors.
• Legends: Choose the font styling for items in legends.
• Buttons: Specify the font styling, border, and background color of toggle button elements, including during active or hover states. Toggle buttons can be used to display navigation items.
• Dropdowns: Select the font styling, border, and background color of dropdowns, including during active or hover states. Dropdowns can be used to display options in filters, selectors, and navigation.
• Sliders: Choose the styling for slider handles, tracks, marks, and tooltips. Sliders can be used to display available options in filters.
• Checkboxes: Style checkboxes and radio buttons, including their background, font, check, and border colors. These can be used to display options in filters and selectors.
• Carousels: Style the carousel elements that are available for use in navigation elements.
• Tooltips: Customize the heading and body of tooltip elements that can be displayed when hovering on chart and map features.
• Annotations: Set up the font styling used in major and minor annotations on maps and charts.
• Dividers: Specify the default style and margin applied to divider elements.
• Pagination: Format pagination components, which are used in carousels, chart pagination, and table pagination.