How Do I Enable Dark Mode on My Masonry Widget in Feedspace?

Overview

The Masonry widget displays your reviews in a Pinterest-style staggered grid, arranging cards across multiple columns of varying heights so visitors can scan a large collection of testimonials at a glance. Because this layout fills the screen with many cards simultaneously, the background tone of the widget has a strong visual impact on how those cards feel as a group.

The Dark Mode toggle, found in the Widget Color Customization section of the Design tab, switches the entire Masonry widget to a dark background theme. When enabled, Feedspace automatically adjusts card colors and text to suit the dark style, keeping every review readable without any manual color tweaking. This is especially useful when you embed the widget on a dark-themed website or landing page, where a light widget would stand out awkwardly against the surrounding design.

How to Enable Dark Mode for Your Masonry Widget

Step 1: Open the Widgets Section

Log in to your Feedspace account and navigate to the Widgets section from the main sidebar. You will see a list of all the widgets you have created.

Step 2: Edit Your Masonry Widget

Locate the Masonry widget you want to update and click the Edit button (or the pencil icon) next to it. This opens the widget editor for that specific Masonry widget.

Step 3: Go to the Design Tab

Inside the widget editor, click the Design tab at the top of the panel. This tab contains all visual customization options for your Masonry widget, including layout settings and color controls.

Step 4: Find the Widget Color Customization Section

Scroll down within the Design tab until you reach the Widget Color Customization section. This section groups all color-related controls for the Masonry widget, including the Dark Mode option.

Step 5: Enable the Dark Mode Toggle

Click the Dark Mode toggle to turn it on. The widget preview will immediately switch to a dark background theme, with card colors and text automatically adjusted to remain legible and visually consistent across the staggered Masonry grid.

Step 6: Save Your Changes

Once you are satisfied with how the dark theme looks in the preview, click Save to apply the changes. The updated dark mode styling will now appear wherever you have embedded or shared this Masonry widget.

What You Can Do Next

• Adjust the card background color to a custom dark shade that matches your brand by visiting the card color settings in the same Widget Color Customization section of your Masonry widget.
• Copy the updated embed code for your Masonry widget and paste it into your dark-themed webpage so the widget blends seamlessly with the surrounding layout.
• Preview how the dark Masonry grid looks across different screen sizes using the responsive preview options in the widget editor before publishing.
• Explore other design options in the Design tab, such as column count and card spacing, to further refine the staggered grid layout of your dark mode Masonry widget.