Dynamic Logo (Light/Dark)

Hello! Is there a way to have the heading logo change based on the dynamic background for the page? It seems silly that there is a dynamic header design option without the ability to implement at least a light and dark logo version.

Thanks for the help!

You can add custom code on each page to do this. If you still need help, please share link to your site

Bumping this for the same issue. Dynamic header is a great feature except it only applies to text and buttons. It would be great to be able to upload dark and light logo options to update dynamically too!

I also have the added dilemma of wanting to use the gradient behind the nav on the homepage (as I'm using a video background), and then dynamic on all other pages.

https://cod-hibiscus-mlx3.squarespace.com
pass: justlove

16 hours ago, CraigN said:

Bumping this for the same issue. Dynamic header is a great feature except it only applies to text and buttons. It would be great to be able to upload dark and light logo options to update dynamically too!

I also have the added dilemma of wanting to use the gradient behind the nav on the homepage (as I'm using a video background), and then dynamic on all other pages.

https://cod-hibiscus-mlx3.squarespace.com
pass: justlove

You found the solution or you need help?

6 hours ago, tuanphan said:

You found the solution or you need help?

I still need help please, the homepage and about page work because they have dark headers (I uploaded a white logo). But on the events page this then gets lost, where ideally it would show a dark version of the logo.

 

22 hours ago, CraigN said:

I still need help please, the homepage and about page work because they have dark headers (I uploaded a white logo). But on the events page this then gets lost, where ideally it would show a dark version of the logo.

 

Try adding to Design > Custom CSS

body[class*="type-blog"], [class*="type-events"], [class*="type-products"] {
header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
} 

This works, brilliant thank you @tuanphan!

Holy Cow. ive been looking for the solution to this, and here it is in 3 seconds. thank you!

Is there any chance of being able to change the dark colour, to a grey and not a solid black? I've been wanting this solution for ages and that code works a treat, but would just love if i could change to a grey colour. Thanks!

On 11/16/2022 at 11:31 PM, JeSuis said:

Is there any chance of being able to change the dark colour, to a grey and not a solid black? I've been wanting this solution for ages and that code works a treat, but would just love if i could change to a grey colour. Thanks!

Hi,No

The code can change to white or black only

To change to grey, you need to use this new code, with new grey image url

body[class*="type-blog"], [class*="type-events"], [class*="type-products"] {
header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/10/21/10/51/snail-7536762_1280.jpg);
}
} 

Replace Pixabay image with a grey image url

For a simple inverting of the header logo color site wide, this works. Place in your Custom CSS:

//Invert header logo color on dark themed Sections
.dark, .dark-bold, .black, .black-bold {
  &.header .header-title-logo a {
    filter: invert(1);
    -webkit-filter: invert(1);
}}

Thanks to https://spacesites.com.au/tips/squarespace-71-2-methods-to-swap-out-logos-colour-sections-and-specific-pages for the tip and cheat sheet on theme colors. Alternatively, you could switch out the logo graphic as described in the spacesite.com link above.