$25.00
Fit check
Great for
Creative Studios
Personal Brands
Designers
Know before you buy
- Needs Squarespace 7.1 on a plan with Code Injection; Squarespell lists Business or higher.
- First time visitors start in light mode unless you turn on the follow the system setting option.
- The dark look is only as good as the colour themes you set up, so contrast needs checking.
Version7.1
SetupEasy
Overview
Squarespell's Dark Mode Toggle Plugin adds a sun and moon switch to a Squarespace 7.1 site that flips the whole site between light and dark. Rather than a generic colour inversion, it reuses the colour themes you have already set in Squarespace and remembers each visitor's choice.
What you get
- A light and dark toggle in the navigation, the Social Links row or a floating corner button
- Dark mode built from your own Squarespace colour themes
- Each visitor's choice remembered across pages and visits
- A preload script that avoids a flash of white on load
- Coverage of every page type, including cart and 404 pages
- Single website licence at $25 or unlimited websites at $45
Who it suits
Design led brands, portfolios and content sites whose visitors browse at night or simply prefer dark interfaces.
Honest limits
- Needs Squarespace 7.1 on a plan with Code Injection; Squarespell lists Business or higher.
- First time visitors start in light mode unless you turn on the follow the system setting option.
- The dark look is only as good as the colour themes you set up, so contrast needs checking.
How it is delivered
You buy the licence from Squarespell and download it straight away. Paste the Header and Footer snippets into Custom Code, then Code Injection, choose where the toggle sits, and save. The plugin switches itself off inside the Squarespace editor so editing is unaffected.
Related guide: Squarespace styling plugins and the Squarespace plugins hub.
Squarespell's Dark Mode Toggle Plugin adds a sun and moon switch to a Squarespace 7.1 site that flips the whole site between light and dark. Rather than a generic colour inversion, it reuses the colour themes you have already set in Squarespace and remembers each visitor's choice.
What you get: a light and dark toggle in the navigation, the Social Links row or a floating corner button; dark mode built from your own Squarespace colour themes; each visitor's choice remembered across pages and visits; a preload script that avoids a flash of white on load; coverage of every page type, including cart and 404 pages; Single website licence at $25 or unlimited websites at $45.
Who it suits: Design led brands, portfolios and content sites whose visitors browse at night or simply prefer dark interfaces.
Honest limits: Needs Squarespace 7.1 on a plan with Code Injection; Squarespell lists Business or higher. First time visitors start in light mode unless you turn on the follow the system setting option. The dark look is only as good as the colour themes you set up, so contrast needs checking.
How it is delivered: You buy the licence from Squarespell and download it straight away. Paste the Header and Footer snippets into Custom Code, then Code Injection, choose where the toggle sits, and save. The plugin switches itself off inside the Squarespace editor so editing is unaffected.
What you get: a light and dark toggle in the navigation, the Social Links row or a floating corner button; dark mode built from your own Squarespace colour themes; each visitor's choice remembered across pages and visits; a preload script that avoids a flash of white on load; coverage of every page type, including cart and 404 pages; Single website licence at $25 or unlimited websites at $45.
Who it suits: Design led brands, portfolios and content sites whose visitors browse at night or simply prefer dark interfaces.
Honest limits: Needs Squarespace 7.1 on a plan with Code Injection; Squarespell lists Business or higher. First time visitors start in light mode unless you turn on the follow the system setting option. The dark look is only as good as the colour themes you set up, so contrast needs checking.
How it is delivered: You buy the licence from Squarespell and download it straight away. Paste the Header and Footer snippets into Custom Code, then Code Injection, choose where the toggle sits, and save. The plugin switches itself off inside the Squarespace editor so editing is unaffected.
What it does
- Adds a light and dark mode toggle to a Squarespace 7.1 site
- Builds dark mode from your own Squarespace colour themes
- Remembers each visitor's choice without a white flash
- Works on every page, including cart and 404
Full specifications
Specifications
Squarespace Version
7.1
What it does
Adds a light and dark mode toggle to a squarespace 7.1 site
Builds dark mode from your own squarespace colour themes
Remembers each visitor's choice without a white flash
Works on every page, including cart and 404
Builds dark mode from your own squarespace colour themes
Remembers each visitor's choice without a white flash
Works on every page, including cart and 404
Key Features
Toggle in nav, social links or floating button
Uses your own colour themes
Remembers each visitor's choice
No flash of white on load
Optional follow the system setting
Single site or unlimited site licence
Uses your own colour themes
Remembers each visitor's choice
No flash of white on load
Optional follow the system setting
Single site or unlimited site licence
Best for
Creative studios
Personal brands
Designers
Personal brands
Designers
Setup Difficulty
Easy
Considerations
Needs squarespace 7.1 on a plan with code injection; squarespell lists business or higher.
First time visitors start in light mode unless you turn on the follow the system setting option.
The dark look is only as good as the colour themes you set up, so contrast needs checking.
First time visitors start in light mode unless you turn on the follow the system setting option.
The dark look is only as good as the colour themes you set up, so contrast needs checking.
FAQs
FAQs
What does Dark Mode Toggle Plugin do?
Squarespell's Dark Mode Toggle Plugin adds a sun and moon switch to a Squarespace 7.1 site that flips the whole site between light and dark.
How much does it cost?
It is a one-off purchase from Squarespell: $25 for a single website licence or $45 for the multi-use licence. Squarespell also discounts bundles of two or more of its plugins at checkout.
How is it installed?
You buy the licence from Squarespell and download it straight away. Paste the Header and Footer snippets into Custom Code, then Code Injection, choose where the toggle sits, and save. The plugin switches itself off inside the Squarespace editor so editing is unaffected.
Will dark mode match my design?
Yes. It uses the colour themes set in Design, then Colours, so dark mode follows your own brand palette rather than inverting everything.
Does it remember the visitor's choice?
Yes. The choice is saved in the browser and applied before the page paints on later visits, so returning dark mode visitors do not see a white flash.
What do I need before buying?
Needs Squarespace 7.1 on a plan with Code Injection; Squarespell lists Business or higher. Check the live demo before buying if you can, and note that support comes from Squarespell rather than Squarespace.