Jump to content

Light/Dark mode for logo

Recommended Posts

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;
    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!

Link to comment
  • Replies 3
  • Views 212
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

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!


Link to comment
  • 1 year later...

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!

I make premium Squarespace plugins and give them away for FREE at https://squarify.xyz .

🛒 Peekaboo Side Cart Plugin

🎬 Video Lightbox Plugin

🌗 Dark Mode Toggle Plugin

🤯 Why Free?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.