How to Enable a Dark Mode Toggle on Your Squarespace Site (Without Losing Your Mind)

How to Add a Dark Mode Toggle to Your Squarespace Website

This section covers the complete process from start to finish. You will write a small CSS class, add a toggle button with JavaScript, and test everything on your live site. Each step builds on the previous one, so follow them in order.

Step 1: Open Custom CSS in Your Squarespace Dashboard

Log into your Squarespace account and navigate to Design > Custom CSS. This is the panel where you add style rules that apply across your entire site. Any CSS you write here overrides the default template styles, which is exactly what you need for a dark mode color scheme.

If you have never used Custom CSS before, the panel will be empty. That is normal. Everything you paste here takes effect immediately in preview mode, so you can see your changes in real time.

Step 2: Add Your Squarespace Dark Mode CSS Styles

Paste the following CSS into the Custom CSS panel. This creates a .dark-mode class that changes the background color, text color, and link color whenever it is applied to the body element.

body.dark-mode {   background-color: #121212;   color: #f0f0f0; }  body.dark-mode a {   color: #88ccff; }

This is your base dark mode stylesheet. The dark background (#121212) is easy on the eyes without being pure black, and the light text (#f0f0f0) provides strong contrast for readability. The link color (#88ccff) stands out clearly against the dark background so visitors can still identify clickable elements.

You can extend these styles to target any element on your site. For example, if your headings, buttons, or navigation menu look off in dark mode, add more rules using the .dark-mode prefix. Here are a few common additions:

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {   color: #ffffff; }  body.dark-mode .header-nav a {   color: #f0f0f0; }  body.dark-mode button, body.dark-mode .sqs-block-button-element {   background-color: #333333;   color: #f0f0f0;   border: 1px solid #555555; }

Test each addition in preview mode before saving. The goal is a consistent dark theme that covers every visible element on your pages.

Step 3: Add the Toggle Button via Squarespace Code Injection

Now you need a button that lets visitors switch between light and dark mode. Go to Settings > Advanced > Code Injection > Header and paste the following HTML and JavaScript:

<button id="darkModeToggle" style="position:fixed;bottom:20px;right:20px;z-index:9999;padding:10px 15px;border:none;border-radius:50%;cursor:pointer;font-size:20px;background:#333;color:#fff;">🌓</button>  <script>   const btn = document.getElementById("darkModeToggle");   btn.onclick = () => {     document.body.classList.toggle("dark-mode");     localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));   };   if (localStorage.getItem("darkMode") === "true") {     document.body.classList.add("dark-mode");   } </script>

This script does three things. First, it creates a fixed-position button in the bottom-right corner of every page. Second, it toggles the .dark-mode class on the body element each time a visitor clicks the button. Third, it saves the visitor's preference to localStorage so the setting persists when they navigate to other pages or return later.

The button uses a moon emoji as its icon, but you can replace that with any text, icon font, or SVG that fits your brand.

Step 4: Test and Adjust Your Dark Mode Toggle

Save your changes and preview your site. Click the toggle button and check every page for elements that do not look right in dark mode. Common issues include:

Images with white backgrounds that clash against the dark theme. Navigation menus that keep their light background color. Footer sections with hardcoded light colors. Form fields that become invisible because the text and background match.

Use your browser's developer tools (right-click any element and select Inspect) to identify which CSS selectors you need to target. Add those selectors to your Custom CSS panel with the .dark-mode prefix, adjust the colors, and test again. Most sites need five to ten additional rules beyond the base styles to get a polished result.

Make sure to test on mobile devices as well. The fixed-position toggle button should not overlap important content or navigation elements on smaller screens. Adjust the bottom and right values in the button's inline style if needed.

Why Dark Mode Matters for Squarespace Websites

Dark mode is not just a visual preference. It affects how long visitors stay on your site, how accessible your content is, and how your brand is perceived. Here is why it matters.

Reduced eye strain in low-light environments. Most web browsing happens in the evening. A dark color scheme reduces the amount of blue light hitting the visitor's eyes, which makes reading more comfortable and keeps people on your pages longer. For content-heavy Squarespace sites like blogs and portfolios, this directly impacts engagement.

Accessibility and inclusivity. Some visitors have light sensitivity, migraines, or visual conditions that make bright screens painful. Offering a dark mode toggle gives those visitors a way to use your site comfortably. It is a small addition that signals you care about every person who lands on your pages.

Modern design expectations. Every major platform - iOS, Android, Windows, macOS, Chrome, Firefox - now supports system-wide dark mode. Visitors are accustomed to having the option, and sites that do not offer it can feel outdated by comparison. Adding a toggle puts your Squarespace site in line with current design standards.

OLED screen battery savings. On devices with OLED displays, dark pixels use less power than light ones. A dark mode option can genuinely extend battery life for mobile visitors, which is a practical benefit beyond aesthetics.

Tips for Customizing Dark Mode on Squarespace

The base CSS and JavaScript above give you a working toggle, but a few extra refinements will make the experience feel polished and intentional. For more ideas on customizing your site's visual identity, see our guide to Squarespace templates design and layout.

Avoid pure black backgrounds. A background of #000000 creates harsh contrast that is actually harder to read than a dark gray. Stick with #121212 or #1a1a1a for a softer, more comfortable look. The slight warmth makes text easier to scan and gives your site a premium feel.

Check image contrast. Logos and graphics designed for a white background often disappear or look awkward on dark backgrounds. Consider using transparent PNGs with light-colored versions of your logo, or add a subtle background shape behind images that need it.

Style form fields explicitly. Contact forms, email signup boxes, and search bars frequently break in dark mode because their text and background colors are not covered by the base styles. Target each form element with .dark-mode rules to make sure inputs remain visible and usable.

Add a smooth transition. Instead of an instant color flip, add a CSS transition to the body element so the switch feels smooth:

body {   transition: background-color 0.3s ease, color 0.3s ease; }

This single rule makes the dark mode toggle feel intentional rather than abrupt. It is a small detail that makes a noticeable difference in perceived quality.

Respect the visitor's system preference. You can enhance the JavaScript to detect the operating system's dark mode setting and apply it automatically on first visit. Add this line before the localStorage check in your script:

if (localStorage.getItem("darkMode") === null && window.matchMedia("(prefers-color-scheme: dark)").matches) {   document.body.classList.add("dark-mode"); }

This means visitors who already use system-wide dark mode will see your dark theme immediately without having to click the toggle. They can still switch back to light mode if they prefer.

Conclusion: Give Your Squarespace Visitors the Dark Mode They Expect

Adding a dark mode toggle to your Squarespace site takes less than fifteen minutes and requires nothing beyond the tools Squarespace already gives you. A few lines of CSS define your dark color scheme, a short JavaScript snippet handles the toggle logic and remembers each visitor's choice, and the result is a feature that makes your site more comfortable, more accessible, and more modern.

Your visitors already use dark mode on their phones, their laptops, and their favorite apps. Giving them the same option on your website shows that you pay attention to the details that matter. Start with the base styles in this guide, customize the colors to match your brand, and test thoroughly on every page and device. That small toggle button in the corner will quietly improve the experience for every person who visits after dark.