Internet Speed Test AI Prompt Library CSS Gradient Generator Meta Tag Generator Color Converter QR Code Generator

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.