Escuro

Dark/Light Mode Switch

Alternador de tema minimalista com transição suave e feedback dinâmico.

HTML 

<div class="theme-switch-container">
  <label>Estilo</label>
  <div class="switch-wrapper">
    <button type="button" class="dark-light" id="theme-toggle">
      <span class="toggle-circle"></span>
    </button>
    <p id="theme-text">Escuro</p>
  </div>
</div>
CSS 

.dark-light {
  width: 64px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: var(--input-base);
  border: 1px solid var(--input-stroke);
  transition: all 0.2s ease;
}

.toggle-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--input-stroke);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-light.active {
  background-color: var(--brand-light);
}

.dark-light.active .toggle-circle {
  background-color: var(--text-heading);
  transform: translateX(30px);
}