Logo Variants

Site URL: https://fifty-fifth-test-site.squarespace.com/

I have created a home page that has a video playing in the background - I have then made my header transparent so that the video fills the entire page. The navigation and social logos changed to white when I did this, which is great as they are now visible over the dark video. However, I had to change my logo to be white so that it’s visible over the video as well. On my other pages that I am now beginning to create there is no video and the background is light - the navigation and social buttons go back to being darker (thumbs up) BUT I will have to change my logo back to being dark (thumbs down). Is there a way to have two versions of my logo and have it change in the same way that the navigation and social buttons do (white on dark background - black on light background)? Is this possible through custom CSS?

I'm not much of a coder so would appreciate any guidance whatsoever! 

I have attached two screen grabs. One of the darker background (homepage with video) and the other with the lighter background (current about page with white logo where I want it to be dark).

Thanks very much in advance! 

What is access password?