Help Center

Background color

Background color

Choose default background color

You can change the background color of your design uploads. This is useful to ensure that there is sufficient contrast and to demonstrate how the components look when used in part of a larger design.

To set a default background color for your uploads, press Design Uploads under Styleguide settings. Then, press upload background color. 

Screenshot 2023-04-19 at 16.16.51.png

Once you select your color, you’ll confirm the change. 

Screenshot 2023-04-19 at 16.17.43.png

You can always change these locally once you set a default (see the next section). 

Change background color on a specific upload 

  • On your design upload, click the ...
Design upload hovered over to show the three dot menu.
  • Choose the background color from the color picker. You can optionally apply the color to all the designs in that section.
Color picker in the Choose background color function for design uploads

Light and dark mode

If you have multiple versions of your components, you can add both the light mode and dark mode designs. These can be displayed alongside each other or on separate tabs. 

Inspect mode

You can customize the background color for components in the Inspect view. You can apply a color background from the design uploads block and toggle on Use as background in Inspect.

Color picker in the Choose background color function for Inspect mode

👉 Note: The background color in inspect currently only applies to designs/effects that fall outside the bounds of a frame or component, such as drop shadows.