Jump to content

Light/Dark Mode

Recommended Posts

Hi all! 

I was wondering how it would be possible to implement a button onto my website which I can click to get a light/dark mode activated- simply changing the background to dark and its components such as the navigation bar etc.. 

Hopefully you could help me out! 

Thank you in advance! 


Link to comment
  • 1 year later...

Plugin available

First letting anyone know, I've made a dark mode plugin for Squarespace which does exactly what you described.

It also has automatic mode. It knows if user has dark mode in their phone/computer settings. It's not free, but if you have any problems I'll fix them. With free tutorials your emails won't get replied.

You can also read this blog post: Squarespace Dark Mode – Ultimate guide 


If you want to make one youreself, I recommend using the Squarespace 7.1 color palettes:


Basically creating a button, and that button will add a specific colour theme to all sections in the page. This way it's easy to edit how the dark mode should look, specifying each element and editing them easily.

Quite a bit of other customisations are needed as well. I can't share my entire plugin code (as it's something I've spent weeks on) but here's a video that tells exactly how it works and how a dark mode plugin can be made. It's pretty long and detailed. 

How a Squarespace dark mode plugin is coded (20 min video)


If that's too much, take a look at the Automatic dark mode plugin. Takes 1 minute to install. 

Here are some free tutorials: 

Dark Mode tutorial by Michael Henry

How to Add Dark Mode & Light Mode Toggle to your Squarespace Website by Squarestylist
This video goes to detail and is free. Video takes 15 minutes, has a lot of manual work. Some comments say it doesn’t work, doesn’t work on mobile and some places don’t turn dark...

Edited by codeandtonic

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 4 months later...

Thanks codeAndTonic for the info on this.

Once again, Squarespace seems to be a little under developed in certain areas, and I would have expected this to be snapped up already, it seems like such an obvious omission.

In fact, when adding imagery, there should be a dark/light option.

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.