Hilari Web

🌗 Lección 39: ¡Implementando el Modo Oscuro! 🌙✨

En esta lección, te centrarás en una funcionalidad moderna que mejora la experiencia del usuario y la accesibilidad: el modo oscuro. Aprenderás a activarlo en tu sistema de ventas de forma sencilla y a añadir un interruptor para que los usuarios puedan cambiar entre el tema claro y el oscuro.

El video cubre los siguientes puntos clave:

• Demostración del Sistema: El creador del video comienza mostrando el funcionamiento actual del sistema de gestión de inventario.
• Activación del Modo Oscuro: Se explica cómo habilitar el modo oscuro cambiando el valor de layout_dark_mode de null a true en el archivo de configuración adminlte.php.
• Habilitación de la Barra Lateral: Se muestra cómo activar la barra lateral derecha para obtener opciones de personalización adicionales.
• Añadiendo el Interruptor de Tema: El creador del video añade un fragmento de código JavaScript a un archivo de plantilla (page.blade.php) que activa la funcionalidad de cambio de tema a través de la barra lateral.
• Prueba Final: Se demuestra que el nuevo interruptor de tema aparece en la esquina superior derecha, permitiendo a los usuarios alternar entre el tema oscuro y el claro. Además, se confirma que el tema seleccionado se mantiene incluso después de recargar la página.

<script>
$(document).ready(function() {
   // Crear contenido del control sidebar
   var sidebarContent = `
       <div class="p-3">
           <h5><i class="fas fa-cogs"></i> Configuración</h5>
           <hr class="mb-2">
           
           <h6>Cambiar tema</h6>
           <div class="form-group mb-3">
               <select id="theme-selector" class="form-control form-control-sm">
                   <option value="default">Por defecto</option>
                   <option value="primary">Azul (Primario)</option>
                   <option value="success">Verde</option>
                   <option value="danger">Rojo</option>
                   <option value="warning">Amarillo</option>
                   <option value="info">Celeste</option>
                   <option value="secondary">Gris</option>
               </select>
           </div>
           
           <div class="form-group mb-3">
               <div class="custom-control custom-switch">
                   <input type="checkbox" class="custom-control-input" id="dark-mode">
                   <label class="custom-control-label" for="dark-mode">Modo oscuro</label>
               </div>
           </div>
           
           <hr class="mb-2">
           <h6>Sistema</h6>
           <small class="text-muted">
               <div><i class="fas fa-user mr-2"></i>{{ Auth::user()->name }}</div>
               <div><i class="fas fa-calendar mr-2"></i>{{ date('d/m/Y') }}</div>
               <div><i class="fas fa-clock mr-2"></i>{{ date('H:i') }}</div>
           </small>
       </div>
   `;
   
   // Esperar a que todo cargue y luego insertar contenido
   setTimeout(function() {
       $('.control-sidebar').html(sidebarContent);
       
       // Arreglar el layout cuando se abre/cierra el sidebar
       $('[data-widget="control-sidebar"]').on('click', function() {
           setTimeout(function() {
               $('body').toggleClass('control-sidebar-slide-open');
           }, 100);
       });
       
   }, 100);
   
   // Cambiar tema
   $(document).on('change', '#theme-selector', function() {
       var theme = $(this).val();
       
       if (theme === 'default') {
           // Restaurar tema por defecto de AdminLTE
           $('.main-sidebar').removeClass('sidebar-dark-primary sidebar-dark-success sidebar-dark-danger sidebar-dark-warning sidebar-dark-info sidebar-dark-secondary')
                             .addClass('sidebar-dark-primary elevation-4');
           
           $('.main-header').removeClass('navbar-primary navbar-success navbar-danger navbar-warning navbar-info navbar-secondary')
                            .addClass('navbar-white navbar-light');
           
           $('.info-box-icon').removeClass('bg-info bg-primary bg-success bg-danger bg-warning bg-secondary')
                              .addClass('bg-info');
           
           localStorage.setItem('selected-theme', 'default');
       } else {
           // Aplicar tema seleccionado
           $('.main-sidebar').removeClass('sidebar-dark-primary sidebar-dark-success sidebar-dark-danger sidebar-dark-warning sidebar-dark-info sidebar-dark-secondary')
                             .addClass('sidebar-dark-' + theme + ' elevation-4');
           
           $('.main-header').removeClass('navbar-primary navbar-success navbar-danger navbar-warning navbar-info navbar-secondary navbar-white navbar-light')
                            .addClass('navbar-' + theme + ' navbar-light');
           
           $('.info-box-icon').removeClass('bg-info bg-primary bg-success bg-danger bg-warning bg-secondary')
                              .addClass('bg-' + theme);
           
           localStorage.setItem('selected-theme', theme);
       }
   });
   
   // Modo oscuro
   $(document).on('change', '#dark-mode', function() {
       if ($(this).is(':checked')) {
           $('body').addClass('dark-mode');
           localStorage.setItem('dark-mode', 'true');
       } else {
           $('body').removeClass('dark-mode');
           localStorage.setItem('dark-mode', 'false');
       }
   });
   
   // Establecer valores por defecto
   setTimeout(function() {
       var savedTheme = localStorage.getItem('selected-theme');
       var darkMode = localStorage.getItem('dark-mode');
       
       if (savedTheme) {
           $('#theme-selector').val(savedTheme).trigger('change');
       } else {
           // Establecer "Por defecto" como selección inicial
           $('#theme-selector').val('default');
       }
       
       if (darkMode === 'true') {
           $('#dark-mode').prop('checked', true).trigger('change');
       }
   }, 100);
});
</script>