How to add a light logo for dark colour site styles in Squarespace

When designing a site with multiple colour sections, you may want to swap out your default logo for a lighter version when the background turns dark, ensuring it remains visible and enhances the user experience. Here's how to do this using Squarespace’s built-in colour themes and custom CSS.

Background Colour Themes and Their Classes

Squarespace uses specific classes to define different background colours for sections. This allows you to target certain sections based on the background colour using custom CSS.

Here are the colour themes and their corresponding classes:

• Default Colour Theme — [data-section-theme=""]

• Default Colour Theme for the Header — [data-header-theme=""] (this would be the main one you’ll use)

• Lightest 1 — .white

• Lightest 2 — .white-bold

• Light 1 — .light

• Light 2 — .light-bold

• Bright 1 — .bright-inverse

• Bright 2 — .bright

• Dark 1 — .dark

• Dark 2 — .dark-bold

• Darkest 1 — .black

• Darkest 2 — .black-bold

By targeting these classes, we can change the logo depending on whether the background is light or dark.

Step 1: Upload the Light Logo

1. Navigate to Design > Custom CSS in your Squarespace dashboard.

2. Scroll down and click on “Manage Custom Files.”

3. Upload the light version of your logo (make sure it’s a PNG with a transparent background for best results, .svgs aren’t accepted by Squarespace).

4. Once uploaded, click on the file name to copy its URL.

Step 2: Add Custom CSS

Now that you have your light logo uploaded, you'll add custom CSS to tell Squarespace to swap the logo for dark-colour themes.

Here's the code to implement:

[data-header-theme=""],
.bright,.bright-inverse,.dark,.dark-bold,.black,.black-bold {
&.header .header-title-logo a, &.header .header-mobile-logo a {
content: url('HTTPS://IMAGE LINK HERE');
max-width: 100%; /* Adjust the logo width */
padding: 10px; /* Optional: Add padding */
}
}

Explanation:

• The code targets all sections with dark backgrounds using the colour theme classes (.bright, .dark, .black, etc.).

• It specifically modifies the logo within the .header-title-logo and .header-mobile-logo elements to display the light version of the logo for dark-themed sections.

• Replace 'YOUR-LIGHT-LOGO-URL-HERE' with the URL of the light logo you uploaded in Step 1.

Troubleshooting

• If the logo isn't changing, inspect the logo element to make sure you're targeting the correct class. You can use your browser's Developer Tools (right-click > Inspect) to identify the logo class if it differs from your template.

• Double-check that the URL of the light logo is correctly added.

---