Squarespace Dark Mode
From $39
”Best dark mode plugin for Squarespace on the market. No weird workarounds or CSS mess, Fenix knows what he’s doing.”
— Aaron Rolston / studiomesa.co
Features
👉 Automatic detection
👉 Manual button
👉 Animated transition
👉 Easy to install in 1 minute
👉 No coding required
👉 No “flash of white” when loading, like other Squarespace dark mode plugins
👉 Logo invert option
👉 Or upload a dark logo
👉 4 different button placements & 2 button styles
👉 Button hover effects & animations
👉 Customise colors of every element
👉 Invert icons and images easily
👉 New feature 2023: image swap! See a demo
👉 + a lot more!
Compatibility
Requirements
Squarespace 7.1 (Business or E-commerce plan)
Restrictions
The default version of your website should be designed as the normal or “light version”.
If your header uses a logo image instead of text, you must use the same logo file for desktop and mobile headers if you want to switch between dark and light logo versions.
The Story
Why I created this product
Just like the next/previous links for Squarespace e-commerce, the Dark Mode plugin was something I decided to develop when a user on Reddit asked if there was a dark mode plugin for Squarespace.
I love the dark mode, especially because Squarespace 7.1 introduced the option to add and customise colour palettes.
Updates
26 Mar 2024
An update by Squarespace update broke the plugin. Fixed immediately, and now working again. I updated to Squarespace’s new HTML. data-section-themes instead of CSS classes like before.
24 May 2023
Image swap added. You can show and hide any image, block, or even an entire section, when dark mode is on or off. It’s also smart, showing it faded when editing so you can still edit freely.
May 3 2023
Improvements to the search page on dark mode, including a dark version for the magnifying glass icon, search results and search input placeholder text.
Dec 7 2022
Fixed a bug where portfolio pagination links didn’t turn dark in some cases.
Nov 9 2022
Fixed gallery section lightbox backgrounds
Added option to easily invert icons etc
May 26 2022
Added option to manually invert any image or element. Perfect for icons.
May 25 2022
Fixed a bug where logo invert did not work on mobile for some header designs
Added a snippet to hide the fixed floating button on mobile screens (useful if you already have another button or mobile so there isn’t 2 buttons)
Apr 14 2022
Fixed a bug where buttons had a wrong mouse cursor on OS X & Safari
Apr 11 2022
Huge update. You can now use ANY colour themes as the dark mode AND in your normal bright version! No coding! 100% automatic.
Apr 10 2022
Added an option for inverting a logo image. Works for most logos so no need to create or upload a second image file
Apr 9 2022
Fixed a bug where section with a background image and overlay had a slightly faster animation than other sections
Apr 7 2022
Toggle button label that says “turn dark mode on” or “off” - now shown only on desktop. This hover effect sucked on touch screens, so I removed it completely.
Apr 6 2022
Added a notification for sections that have a section width: inset. Those will not work but it’s super easy to fix. Plugin will tell you to do it to avoid any undetected issues :)
Improved the footer dark section for easier editing and seeing the actual end result when logged in
Made dark mode logo to be fade-in more smoothly
Mar 30 2022
removed the white flash when changing pages
Added support for Cart page and mobile navigation
Fixed a bug where light color was visible on pages with only 1 section that was not as high as the browser
Fixed a bug where the logo switching had a small delay. Now it’s instant.
other smaller bug fixes
Dec 30 2022
Automatic detection of dark mode if user has it enabled with real-time changes
Hover shows “enable/disable darkmode” -tag
Button fixed to bottom right to make it easily available on mobile, easily recognized and not get lost in menu
Added a reset button for admins to to make site design easier
Updated instructions and new code
Updating the videos & more asap.