Site Theme API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

Resolve a theme color ID to a color value

A color setting in your component's settings holds either a theme color ID, such as color_4, when the Wix user picks a color from the site's theme, or a color value that the Wix user entered, such as #333333. This flow turns the setting into a color value you can use in CSS.

To resolve a theme color ID to a color value, follow these steps:

1. Read the color setting from your own component's settings object:

   Copy

2. Check whether the setting is a theme color ID. Anything else is already a color value:

   Copy

3. Look up the ID in colors. The lookup gives undefined when the site's theme doesn't have that ID, so fall back to a default color:

   Copy

4. Use the color while the component renders. Reading colors during the render, rather than once when the component mounts, makes the component follow theme changes:

   Copy

Draw a chart in the site theme colors

To draw a chart in the site theme colors, follow these steps:

1. Read colorsMap while the component renders, so the component renders again when the theme changes:

   Copy

2. Draw the chart in an effect that depends on themeColors, so it redraws only when the theme or the data changes. Fall back to a default color for any index the theme doesn't have. drawChart(), sales and canvasRef are your own charting function, data and canvas ref:

   Copy

3. Render the canvas that the effect draws on:

   Copy