How to Make Your Logo Visible on Dark Backgrounds in Squarespace

You’ve got a beautiful, perfectly sized logo that’s ready to go. The only issue is that it mysteriously disappears when you put your black logo on a black background.

If only there was a way for a logo to automatically change to white on a dark background, and vice versa.

The good news? There is!

If you want to change the color of your logo to complement your background, there are two ways you can do this.

Option 1: Invert logo color with CSS

The first option is to use CSS to invert the Squarespace logo color. This works best for black logos as colors will be inverted. If you have a colored logo, option 2 below is a better choice.

Open your Squarespace site. Then click Website > Website Tools (scroll down) > Custom CSS, and paste in this code:

PAGE-ID .header-title-logo img {
  filter: invert(100%);
}

If you want to invert the logo on only one page, then replace PAGE-ID with that page id, or if you want to invert the logo on all pages, just remove the PAGE-ID.

Option 2: Adapt the logo color automatically without code

Alternatively, you can use Spark Plugin to automatically convert the color of your Squarespace logo, so it shows on any background.

The benefit of doing it this way is that it changes automatically based on your background. This means you don’t have to worry about updating it on every page of your site or if you change out your website background.

Find out more about the Spark Plugin adaptive logo color plugin.