Dark mode toggle

javascript

This floating button toggle that can be used to convert text and images to dark mode on any Squarespace site.

How this works

This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.

This code will alter the background content to be dark, and the text content to light, creating a high contrast commonly referred to as “dark mode”. It’s designed to invert images as well, and is not color theme specific.

How to use this code

This code is designed to work on every page of your site. Copy this code using the copy button on the right.

It’s recommended that you add it to your site wide header code injection.

You’ll find this under Website → Website Tools → Code Injection

<script>
  document.addEventListener("DOMContentLoaded", function () {
  const root = document.documentElement;
  const toggleButton = document.createElement("button");
  toggleButton.id = "darkModeToggle";
  toggleButton.textContent = "🌙"; // Initial moon icon

  // Add the button to the bottom right corner
  toggleButton.style.position = "fixed";
  toggleButton.style.bottom = "20px";
  toggleButton.style.right = "20px";
  toggleButton.style.padding = "10px 15px";
  toggleButton.style.border = "none";
  toggleButton.style.borderRadius = "5px";
  toggleButton.style.backgroundColor = "#444";
  toggleButton.style.color = "#fff";
  toggleButton.style.cursor = "pointer";
  toggleButton.style.zIndex = "1000";
  document.body.appendChild(toggleButton);

  // Hardcoded fallback dark mode variables
  const darkModeStyles = {
    "--white-hsl": "0, 0%, 10%",
    "--black-hsl": "0, 0%, 90%",
    "--safeLightAccent-hsl": "0, 0%, 30%",
    "--safeDarkAccent-hsl": "0, 0%, 80%",
    "--safeInverseAccent-hsl": "0, 0%, 90%",
    "--safeInverseLightAccent-hsl": "0, 0%, 70%",
    "--safeInverseDarkAccent-hsl": "0, 0%, 10%",
    "--accent-hsl": "220, 50%, 50%",
    "--lightAccent-hsl": "220, 40%, 30%",
    "--darkAccent-hsl": "220, 20%, 10%",
  };

  // Original root variables (backup for light mode)
  const originalStyles = {};

  function saveOriginalStyles() {
    for (const key in darkModeStyles) {
      originalStyles[key] = getComputedStyle(root).getPropertyValue(key).trim();
    }
  }

  function applyDarkMode() {
    for (const key in darkModeStyles) {
      root.style.setProperty(key, darkModeStyles[key]);
    }
    // Invert header title
    const headerTitle = document.querySelector(".header-title");
    if (headerTitle) headerTitle.style.filter = "invert(1)";
  }

  function applyLightMode() {
    for (const key in originalStyles) {
      root.style.setProperty(key, originalStyles[key]);
    }
    // Revert header title
    const headerTitle = document.querySelector(".header-title");
    if (headerTitle) headerTitle.style.filter = "none";
  }

  // Toggle dark mode
  toggleButton.addEventListener("click", function () {
    if (root.classList.contains("dark-mode")) {
      root.classList.remove("dark-mode");
      applyLightMode();
      toggleButton.textContent = "🌙";
      localStorage.setItem("darkMode", "disabled");
    } else {
      root.classList.add("dark-mode");
      applyDarkMode();
      toggleButton.textContent = "☀️";
      localStorage.setItem("darkMode", "enabled");
    }
  });

  // Save original styles initially
  saveOriginalStyles();

  // Apply user preference on load
  if (localStorage.getItem("darkMode") === "enabled") {
    root.classList.add("dark-mode");
    applyDarkMode();
    toggleButton.textContent = "☀️";
  }
});
</script>
Next

Countdown Timer