When site owners design a Wix site, linking elements to the site's theme ensures a clean, cohesive, and professional design. A color theme provides a predefined set of colors, while a typography theme defines the appearance of site text. Learn more about site themes in Wix Studio, site themes in Wix Editor, and site branding in Wix Harmony.
If you're building a site widget with a custom element, you can configure it to automatically adopt the site's theme styles. This ensures your widget integrates seamlessly into the site's design, maintaining consistency across all components.
Every site's theme styles are exposed as CSS variables on the web page, making it easy to reference and apply them to your custom elements. These variables include design tokens for the colors and fonts that match the site's theme.
Which variables a site exposes depends on the editor it was built in:
By using CSS variables, your custom element will automatically adapt to changes in the site's theme. This ensures your element remains consistent with the site's updated design without requiring manual intervention.
To connect your custom element's styles to the site's theme, resolve the appropriate CSS variables and apply them in your code. The following are examples of integrating theme colors and fonts.
Tips:
var() from the Wix Editor and Wix Studio set inside the fallback. In this example, --wst-heading-1-color resolves on a Harmony site, --wst-color-title resolves on a Wix Editor or Wix Studio site, and #000000 applies if neither exists:Caution: Verify theme styling on a published page, not on the editor canvas.
In the editor, a custom element renders inside a sandbox that receives a fixed set of values. A variable there can:
On a published page it receives the site's live theme.
The CLI generates a CSS module alongside your element but doesn't import it, and it only bundles the stylesheet if your element imports it. Import the module and reference the class names it exports:
The class names in the module are hashed at build time, so use styles.container rather than a literal class="container".
The following example assigns a theme's primary background color to a custom element:
Replace --wst-color-fill-background-primary with any other theme color variable depending on your design requirements.
The following example applies a theme's font style to a text element:
Ensure you use the correct CSS variable for the specific font style, depending on the text's purpose. The font variables are listed in Site Theme CSS Variables and, for Harmony sites, in Harmony Site Theme CSS Variables.
Normally, the theme stylesheet is automatically included with the webpage, ensuring consistent styling across the site. However, when working with custom elements that use a shadow DOM or an internal iframe, the page's stylesheet may be inaccessible.
When working with custom elements in Wix, you might encounter situations where the page's main stylesheet is inaccessible. In such cases, you can use getSiteThemeHtml() to dynamically embed the site's theme styles directly into your custom element, including colors and fonts.
The following example shows how to use getSiteThemeHtml() to dynamically apply your Wix site's theme styles to a custom element's shadow DOM:
Last updated: 6 August 2026