Dark Mode Toggler Generator

Generate the code needed to add a dark/light mode theme toggle to your website.

Dark Mode Toggler Generator

Generate the code needed to add a dark/light mode theme toggle to your website.

1. HTML

<button id="theme-toggle" type="button" class="theme-toggle-button">
  <svg class="sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.707.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM10 18a1 1 0 01-1-1v-1a1 1 0 112 0v1a1 1 0 01-1 1zm-7.95-2.464a1 1 0 010-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707a1 1 0 01-1.414 0zm10.607-2.12a1 1 0 011.414 0l.707.707a1 1 0 11-1.414 1.414l-.707-.707a1 1 0 010-1.414zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm14 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1z"></path></svg>
  <svg class="moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
</button>

2. CSS

/* Define your color variables */
:root {
  --background: #ffffff;
  --foreground: #111827;
}

html.dark {
  --background: #111827;
  --foreground: #ffffff;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  transition: background-color 0.3s, color 0.3s;
}

/* Styles for the button */
.theme-toggle-button {
  background-color: transparent;
  border: 1px solid var(--foreground);
  border-radius: 9999px;
  padding: 0.5rem;
  cursor: pointer;
}
.theme-toggle-button .sun-icon,
.theme-toggle-button .moon-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Show sun icon in light mode, moon in dark */
html:not(.dark) .theme-toggle-button .moon-icon {
  display: none;
}
html.dark .theme-toggle-button .sun-icon {
  display: none;
}

3. JavaScript

(function() {
  const themeToggle = document.getElementById('theme-toggle');
  
  // On page load or when changing themes, best to add inline in `head` to avoid FOUC
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }

  themeToggle.addEventListener('click', function() {
    // toggle icons inside button
    const isDark = document.documentElement.classList.toggle('dark');
    localStorage.theme = isDark ? 'dark' : 'light';
  });
})();

Related Tool

Take your theming a step further.

Once you have your dark and light mode foundation, use our Dynamic Theme Generator to create and preview more complex color schemes with CSS variables.

Dark Mode Toggler Generator

Dark Mode Toggler Generator

1. HTML

2. CSS

3. JavaScript

Related Tool

How do I use the generated code?

How does it remember my choice?

Can I customize the colors?

Why does the script have `(function() { ... })();` around it?