Wix Blocks: Connecting Your Widget Colors to Site Themes
3 min read
Wix Blocks is currently open to a limited number of users.
When you create a widget with Blocks, it can be installed on many different Wix sites. To ensure that your widget's colors look great on all of these sites, make sure to connect it to a theme.
Learn more about widgets and themes and connecting your widget's texts to site themes.
To connect your widget colors to a site color themes:
- Open your widget in the the Wix Blocks Editor to edit it. Make sure you are in Design mode.
- Select a widget component (such as a container or a text input).
- Click the Design icon
in the Inspector menu 
on the right. - Click the color options related to your component to connect their colors to a theme. If it's a box, for example, click the Fill Color & Opacity, Border, Corners or Text icons and connect them to site's color themes.
Buttons and breadcrumb menus:
Note that for buttons and breadcrumb menus, the color picker looks slightly different, and you will not see the link indication. However, these elements still work the same and are linked to your site theme, unless you select a Custom Color.
- Blocks uses a default palette that cannot be changed - this represents the Wix site colors. We recommend that for each element (such as fill or border) you select the appropriate color from the five default colors presented. If you want more shades, click Open Theme Palette and select a different shade.
Important
If you choose a color from the Add a Custom Color section of the color picker and not from the Theme Palette, the color remains fixed and is not connected to site themes. It will stay the same on any site. You might choose to use this option in special cases, such as success and error buttons that you want to keep green and red.
- Test yourself: Select the component again, go through its parts (fill, border, etc.) and look for the link
icon that appears on to the selected color, indicating that it's connected to a theme.
- Click Test Theme in Preview mode to see how your widget looks across various sites with different themes. This helps you check that all your components are connected correctly and your widget looks great with different themes.
