Dark Mode Toggle

Preview

Tailwind Classes

relative w-14 h-7 bg-gray-200 dark:bg-gray-700 rounded-full peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-6 after:w-6 after:transition-transform peer-checked:after:translate-x-7

CSS Code

.toggle-track {
  position: relative;
  width: 3.5rem;
  height: 1.75rem;
  background: #e5e7eb;
  border-radius: 9999px;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  border-radius: 9999px;
  transition: transform 0.2s;
}
input:checked + .toggle-track {
  background: #2563eb;
}
input:checked + .toggle-track::after {
  transform: translateX(1.75rem);
}

HTML Example

<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer" />
  <div class="w-14 h-7 bg-gray-200 peer-checked:bg-blue-600 rounded-full after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-6 after:w-6 after:transition-transform peer-checked:after:translate-x-7"></div>
</label>

Use Cases

Browser Support

All modern browsers