🌓 Módulo 5: Modo Oscuro

Modo Oscuro Integrado con Bootstrap 5.3

Bootstrap 5.3 data-bs-theme Sin CSS Extra

Cómo Funciona

Bootstrap 5.3 usa el atributo data-bs-theme para controlar el tema:

<!-- Modo claro (por defecto) -->
<html lang="es" data-bs-theme="light">

<!-- Modo oscuro -->
<html lang="es" data-bs-theme="dark">

<!-- Auto (sigue preferencia del SO) -->
<html lang="es" data-bs-theme="auto">

Alternador JavaScript

function toggleTheme() {
  const html = document.documentElement;
  const current = html.getAttribute('data-bs-theme');
  const newTheme = current === 'dark' ? 'light' : 'dark';
  
  html.setAttribute('data-bs-theme', newTheme);
  
  // Guardar en localStorage
  localStorage.setItem('theme', newTheme);
}

✅ Ventajas

  • Cero CSS extra - funciona de inmediato
  • Todos los componentes se adaptan automáticamente
  • Diseño consistente en todo tu sitio
  • Fácil de implementar - un atributo
  • Persistente - guardar con localStorage
  • Respeta la elección del usuario - manual o auto

💡 Mejores Prácticas

  • Proporcionar botón de alternancia manual
  • Guardar preferencia del usuario en localStorage
  • Puede detectar preferencia del SO con matchMedia
  • Probar todos los componentes en ambos modos
  • Asegurarse de que el CSS personalizado también se adapte
  • Usar variables CSS para colores personalizados

Los Componentes Bootstrap se Adaptan Automáticamente

Haz clic en el botón de alternancia de tema (arriba a la derecha) para ver todos estos componentes cambiar instantáneamente:

Botones

Cards

Card Estándar

Se adapta automáticamente al modo oscuro

Botón
Card con Borde

Los colores de borde también se adaptan

Botón
Card Coloreada

Los colores del tema se ajustan

Botón

Formularios

Alertas

Badges y Listas

Primario Secundario Éxito Peligro Advertencia Info
  • Item de lista estándar
  • Item de lista activo
  • Otro item de lista

Modo Oscuro Bootstrap 5.3: Implementación Completa

Paso 1: Establecer tema inicial en el elemento HTML

<!-- En tu archivo HTML -->
<html lang="es" data-bs-theme="light">

Paso 2: Crear un botón de alternancia

<button class="btn btn-primary" onclick="toggleTheme()">
  <i class="bi bi-moon-stars-fill" id="theme-icon"></i>
</button>

Paso 3: JavaScript para alternar tema

function toggleTheme() {
  // 1. Obtener tema actual
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-bs-theme');
  
  // 2. Cambiar entre oscuro y claro
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  // 3. Aplicar nuevo tema (¡TODOS los componentes Bootstrap se actualizan instantáneamente!)
  html.setAttribute('data-bs-theme', newTheme);
  
  // 4. Guardar en localStorage para que persista
  localStorage.setItem('theme', newTheme);
  
  // 5. Actualizar icono del botón
  updateThemeIcon(newTheme);
}

Paso 4: Cargar tema guardado al cargar página

window.addEventListener('DOMContentLoaded', () => {
  // Obtener tema guardado de localStorage
  const savedTheme = localStorage.getItem('theme');
  
  if (savedTheme) {
    // Aplicar tema guardado
    document.documentElement.setAttribute('data-bs-theme', savedTheme);
    updateThemeIcon(savedTheme);
  } else {
    // Opcional: Detectar preferencia del SO para primera visita
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    if (prefersDark.matches) {
      document.documentElement.setAttribute('data-bs-theme', 'dark');
      updateThemeIcon('dark');
    }
  }
});

Paso 5: Función auxiliar para actualizar icono

function updateThemeIcon(theme) {
  const icon = document.getElementById('theme-icon');
  if (theme === 'dark') {
    icon.className = 'bi bi-sun-fill'; // Mostrar sol en modo oscuro
  } else {
    icon.className = 'bi bi-moon-stars-fill'; // Mostrar luna en modo claro
  }
}

Qué Hace Especial al Método de Bootstrap

  • Cero CSS extra: Todos los componentes Bootstrap se adaptan automáticamente
  • Una línea lo cambia todo: data-bs-theme="dark"
  • Colores consistentes: Usa el sistema de colores de Bootstrap
  • Fácil de personalizar: Sobrescribir propiedades personalizadas CSS si es necesario
  • Puede aplicarse a secciones: Diferentes temas en diferentes partes de la página
  • A prueba de futuro: Bootstrap maneja toda la compatibilidad