About the Site Theme API

The Site Theme API gives you the colors and fonts of the site's theme, which a Wix user sets in the editor. Use it to draw a component in the site's own colors, including colors that the component's settings refer to by theme color ID. The theme belongs to the whole site, so the values are the same on every page.

With the Site Theme API, you can:

• Resolve a theme color ID to its color value.
• Retrieve the site's theme colors as a list.
• Retrieve the site's theme fonts.

Before you begin

It's important to note the following points before starting to code:

• The values can change while the page is open, for example when a Wix user changes the site's theme in the editor. Read them while a component renders, so the component updates when they change, rather than keeping an object you read earlier.
• A site's theme doesn't have every theme color and font ID. Looking up an ID or index that the theme doesn't have gives undefined, so handle the missing case with a fallback.

Use cases

• Resolve a theme color ID to a color value
• Draw a chart in the site theme colors

Terminology

• Theme color ID: The ID of a color in the site's theme, in the form color_<n>, such as color_4.
• Theme font ID: The ID of a font in the site's theme, in the form font_<n>, such as font_1.

SDK setup

To use the API, install the @wix/site-service-site-theme package:

Import the package

Import types

Import any type shown in these docs from @wix/site-service-site-theme/types:

Resolve the service

In a React component, resolve the service with the useService hook: