You can customize the background color of component previews in your styleguide. This helps ensure components are easier to view—especially if they contain light or transparent elements.
You can update the preview background at different levels:
All components: Applies the background color across the entire styleguide.
Page: Applies to all components on the page.
Component section: Applies to components within that section.
Changing the preview background color
To change the background color, open your Styleguide and navigate to the Components section. Right-click anywhere in the components view, select “Preview background” from the menu, and choose the background color you’d like to apply.
This will update the background for all components. If you want to change the background for only a component page or a section, navigate to that page or section and use the right-click menu.
Alternatively, you can use the “…” options menu to change the preview background.
💁♀️ This setting only affects how components appear in the preview and doesn’t change the component asset itself.