Customize shopping cart page logo

I have read here in the forum about the ability to add some custom script to ensure a darker or light logo displays on specific pages. And I tried to follow along with this (it's a big problem for me!) I usually try to get around this by just change the color style on the page in question, which isn't ideal. I'd much rather have a dark/light logo. 

But on the shopping card page it's a BIG problem. Not the look I want to give customers the moment before they decide whether or not to part with their hard-earned dollars. 

I can't access (or haven't found how to) the shopping cart page, though. Is it possible to display a different logo with CSS there? 

What is the site URL? It isn't included by default when you post.

https://www.flofoundations.com/cart Oh, sorry! Here you go! 

I'm having the same issue. I need to display a darker version of our logo on the cart page. On the other pages where I needed to do this, I used the code injection option on each page, uploaded a custom logo file and then used this code:

<style> 
div.header-title-logo a {
content:url("https://static1.squarespace.com/static/6511b36581531d4b1fda9b04/t/6544f034ca9ecb0c11d9cf11/1699016756930/viddiy-logo.png") !important;     
max-height: 50px;
}
</style>

It works great on individual pages, but I can't figure out a way to use this same code/logo file on the cart page.

It would also be great to use it on the checkout page as well. For now I have a black banner behind the logo, but I'd rather have it be a white background with the black/red logo, as seen on the booking page below.

I've attached screenshots for reference. The main theme logo is white and red, but I need to display the black and red version over certain pages that have a white background. Thanks for any help! 

@VIDDIY,

I don't believe you are allowed to insert code into the checkout at all for security reasons. If the check out needs the black and red logo, I would make it the main theme logo and then use code on the pages that need the white and red logo.

That's a good thought. Thank you!

Seconded what @AlexSan said! I actually had to do this for a client recently (dingsmotionusa.com) and I was in the middle of changing everything manually with code as much as I could but then got stuck. Then realized I could just change the theme. So I set everything up via the theme and changed it on that page, and voila! 

Is there a way to have these changes show up on mobile view as well? Now that I've modified the logo header in the theme, the custom css to make it all work on desktop doesn't seem to be working on mobile...

NVM, I realized that it's because I needed to remove the mobile logo file in the header and let it copy what the desktop is doing.