Dark Mode

Social Hampster components do not automatically switch to a dark appearance when a visitor's device is in dark mode. However, you can set them up to look great in dark mode by configuring the right color props and connecting them to Framer's color variables.

Automatic dark mode switching is not built in. You need to manually set up the component colors for dark mode using the approach described in this article.

Setting up a dark-looking feed manually

If your site has a dark background and you want the feed to match, set these props on your Social Hampster component in the Framer props panel:

Post images themselves will always show their original colors regardless of dark mode — only the card frame, background, and text areas are affected by these props.

[Screenshot: Add screenshot of a Social Hampster feed component styled for a dark background]

Using Framer Variables for automatic dark mode switching

If your Framer project uses a light/dark mode toggle with Color Variables, you can connect Social Hampster component color props to those variables so they switch automatically.

How to connect a color prop to a Framer Variable

1. Click on your Social Hampster component to select it

2. In the props panel, click the color swatch next to a color prop (such as Background Color)

3. In the color picker that appears, look for the Variables or Tokens section

4. Select the variable you use for your site's card background color (for example: -color-surface or whatever you have named it)

5. Repeat for other color props such as text color, border color, and footer background

Now when your site switches between light and dark mode using Framer's variable system, the feed component colors will switch along with the rest of your site.

This is the recommended approach for sites that support both light and dark modes. By tying component colors to variables, you only need to define the colors once and they adapt automatically.

Which props to connect to variables

Prioritize connecting these props to your theme variables:

• Background Color - connect to your surface or card background variable

• Footer Background (Dribbble) - connect to your card background variable

• Footer Text Color (Dribbble) - connect to your primary text color variable

• Stats Text Color (YouTube) - connect to your secondary text color variable

• Border Color - connect to your border color variable

• Arrow Color (Slider) - connect to your icon or interactive element color variable

Note: The post images and media thumbnails are pulled directly from the social platforms and always display in their original colors. Only the chrome around the images (backgrounds, text, borders, overlays) is affected by your color settings.