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 and site themes in Wix Editor.
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. For a comprehensive list of available styles, refer to the site theme CSS variables.
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:
Test your widget on sites with different themes to ensure it works well across various designs and settings.
Always use fallback values in case a theme variable is undefined. For example:
Assign a theme's primary background color to your custom element:
Replace --wst-color-fill-background-primary with any other theme color variable depending on your design requirements.
Apply a theme's font style to a text element:
Ensure you use the correct CSS variable for the specific font style, such as --wst-font-title,--wst-font-paragraph, or others, depending on the text's purpose.
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: