Light/Dark mode for logo

Hi everyone,

I have two questions:

1. I bought the darkmode toggle from Code & Tonic and it works great, but it doesn't impact the logo. I used some other code I found to get the logo and title up in the header section, but I'd really like it if the toggle inverted it. This is the code I'm using for the header at the moment:

// header title
.header-title-logo a:after {
    content: "The Blade & Briar";
    display: inline-block;
    font-size: 100px;
    font-family: Scrivano;
    color: White;
    text-align: center;
    vertical-align:middle;
    font-weight:200;
    padding-left: 20px;
}
.header-title-logo img {
    vertical-align: middle;
}

/*

Does anyone have any suggestions for how to get that working? I know there is an "items to invert" section in the Code & Tonic CSS, but it requires the block id. The problem with that is that the ID finder extension for Chrome isn't able to find one for the logo/header.

2. It would be neat to have an "invert background to x image" option on each page in dark mode. Does anyone have any suggestions for how this might work?

p.s. I did try reaching out to Code & Tonic, but I haven't heard back yet and have some project deadlines. 

Thank you so much!

What is site url? We can check easier

Hey There, 

Were you able to find a solution? I was looking into adding a dark mode/light mode plug in to my websites as well, and I also came across Code & Tonic on google. I also wanted to understand if you have a logo image that you uploaded vs. a text logo that was typed into Squarespace. It would be great to hear from you!

Thanks!

Hey @Brier in case you still need it, I recently created a Dark Mode Toggle Plugin you can use for free here: https://www.squarify.xyz/plugins/p/dark-mode-toggle-plugin

If you are using a logo image in your header, you can provide a URL just for dark mode.

Feel free to let me know if you need any help!