How to add Dark Mode to Squarespace 7.0 and 7.1 (2022)
The dark mode is starting to be a must have feature. Youtube has it. Twitter has it. And now with a plugin from codeandtonic.com – Squarespace has it.
Check out my Perfect Squarespace Dark Mode Plugin here
Different ways to create a dark mode theme in Squarespace
Method 1 - Styling elements with Javascript
Some people on the Squarespace forum use a method that uses javascript to style each element individually. This is a bad idea.
It’s insanely complex. There are so many different elements.
Any updates to Squarespace will break the plugin and you will never know
It’s a massive effort that would require you to list all the elements in your template.
It will lead to a flash of incorrect color theme. So an annoying flash of bright before the plugin loads
Any element added after page load will be unstyled!
Will have bugs that are painful to fix
Don’t use this method ever!
Method 2 - Using CSS
The second option is to use CSS to create a dark mode theme.
So you’d style background to be dark and color of text to be white. For example:
body, section, p, li, ul, h1, h2, h3, h4{
background: black;
color: white;
}You could then apply these styles in two ways. Either manually with a button that adds a class to the html -element that makes the dark mode active. The CSS will work only when user turns on dark mode with a button that adds the dark-mode-active class.
.dark-mode-active{
body, section, p, li, ul, h1, h2, h3, h4{
background: black;
color: white;
}
}Or by using a media query to detect if the user has the dark mode enabled in their settings
@media (prefers-color-scheme: dark) {
body, section, p, li, ul, h1, h2, h3, h4{
background: black;
color: white;
}
}The code inside @media (prefers-color-scheme: dark) is active if the user has a dark mode enabled in their settings. For example
The problem with the CSS method is a little similar to the method 1 – it takes a massive effort to style all the elements one-by-one.
This however is a better solution. You won’t get a flash of white when page loads, all elements are styled regardless of if they are added after page loads.
✅ For Squarespace 7.0, this is the best way and the only way.
⚠️ For Squarespace 7.1 with the color palette and color themes, it’s wasted effort.
Method 3 - Using Squarespace 7.1 color palettes
In this method we take one of the 10 color palettes and style the dark mode style of our dreams.
We will then apply this Squarespace 7.1 color theme to all sections in the page. So you style your color theme easily, and the code will use those styles everywhere.
Pros
+ Super easy to use
+ No need to code the styles manually
+ Squarespace has done most of the work for us!
+ Easy to update and edit
+ Almost like a built-in feature
Cons
- Will cause a short flash of bright when going to another page
- Will not work on cart page, search results page or order confirmation page
- If you have little content on the page, a bright slice might show at the bottom on large screens
✅ The best way for Squarespace 7.1
❌ Does not work on Squarespace 7.0
The best method?
Never use the javascript only method.
CSS method is best and only way for Squarespace 7.0
For 7.1 the absolute perfect end result for users and for the website admin is actually combining methods 2 and 3.
Best Dark Mode method for Squarespace 7.1?
The best method is actually combining both method 2 and 3. Neither is enough on it’s on. We’ll use the method 3 as a “base” to create the dark mode theme and style which is easy to edit and doesn’t require us to manually style all elements.
We will also add a little bit of custom CSS to style to prevent the flash of white on page load, and to style the cart page, site background (in case there is a small slice showing up on a huge screen), add a animated smooth transition.
This “perfect” method is exactly what my Squarespace Dark Mode Plugin uses. It’s the best solution to get dark mode on Squarespace 7.1
This detailed video will explain the Dark Mode code in-depth
