Activa el modo oscuro en Laravel Breeze fácilmente

Laravel Breeze es una de las opciones más sencillas y elegantes para la autenticación en aplicaciones web utilizando Laravel. Si eres un desarrollador que busca mejorar la experiencia de usuario en tu aplicación, activar el modo oscuro puede ser una excelente opción. A través de un proceso simple, puedes ofrecer a los usuarios una alternativa que les permita navegar de manera más cómoda y amigable. A continuación, te presentamos los pasos necesarios para habilitar esta función.

¿Qué es Laravel Breeze?

Laravel Breeze es un paquete que proporciona una implementación básica de autenticación, incluyendo registro, inicio de sesión y restablecimiento de contraseña. Este sistema está diseñado para ser simple y fácil de usar, permitiendo a los desarrolladores centrarse en construir la lógica de sus aplicaciones en lugar de lidiar con las complejidades de la autenticación.

Implementando el modo oscuro

Paso 1: Instalación de Laravel Breeze

Si aún no has instalado Laravel Breeze en tu proyecto, puedes hacerlo fácilmente a través de Composer. Abre tu terminal y ejecuta el siguiente comando:

composer require laravel/breeze --dev

Después de la instalación, ejecuta el siguiente comando para instalar las vistas y rutas predeterminadas:

php artisan breeze:install

Paso 2: Activar el soporte para modo oscuro

Para habilitar el modo oscuro en Laravel Breeze, necesitas realizar algunos cambios en el archivo app.blade.php, que se encuentra en resources/views/layouts. Este archivo es la plantilla base de tu aplicación.

Agrega un botón que permita a los usuarios alternar entre el modo claro y oscuro. A continuación te mostramos un ejemplo de cómo puedes hacerlo:

<button id="toggle-theme">Alternar modo oscuro</button>

Paso 3: Aplicar estilos para el modo oscuro

Una vez que tengas el botón de alternar, necesitarás aplicar los estilos correspondientes para el modo oscuro. Esto se puede lograr utilizando CSS. Es recomendable que añadas clases específicas para el modo oscuro a tu archivo CSS.

body.dark {
    background-color: #1e1e1e;
    color: #ffffff;
}

Asegúrate de que en el archivo JavaScript (que normalmente se encuentra en resources/js/app.js), incluyas la lógica para alternar las clases de estilo cuando el usuario haga clic en el botón.

const toggleThemeButton = document.getElementById('toggle-theme');
toggleThemeButton.addEventListener('click', () => {
    document.body.classList.toggle('dark');
});

Paso 4: Guardar la preferencia del usuario

Para mejorar la experiencia del usuario, es recomendable recordar su preferencia entre las sesiones. Puedes utilizar el localStorage de JavaScript para almacenar la elección del usuario:

if (localStorage.getItem('theme') === 'dark') {
    document.body.classList.add('dark');
}

toggleThemeButton.addEventListener('click', () => {
    const isDark = document.body.classList.toggle('dark');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

Conclusión

Activar el modo oscuro en Laravel Breeze es un proceso sencillo que puede enriquecer significativamente la experiencia de usuario. Con solo algunos pasos puedes ofrecer esta opción en tu aplicación, permitiendo que los usuarios elijan la apariencia que más les gusta. 

Si deseas más Noticias relacionadas o tips sobre Laravel, te invito a que explores más contenido en mi blog. ¡No te lo pierdas!