Activate dark mode in Laravel Breeze easily

Laravel Breeze is one of the simplest and most elegant options for authentication in web applications using Laravel. If you are a developer looking to enhance the user experience in your application, enabling dark mode can be an excellent choice. Through a simple process, you can provide users with an alternative that allows them to navigate more comfortably and friendly. Below, we present the necessary steps to enable this feature.

What is Laravel Breeze?

Laravel Breeze is a package that provides a basic implementation of authentication, including registration, login, and password reset. This system is designed to be simple and easy to use, allowing developers to focus on building the logic of their applications rather than dealing with the complexities of authentication.

Implementing Dark Mode

Step 1: Installing Laravel Breeze

If you haven't installed Laravel Breeze in your project yet, you can do it easily via Composer. Open your terminal and run the following command:

composer require laravel/breeze --dev

After the installation, run the following command to install the default views and routes:

php artisan breeze:install

Step 2: Enable dark mode support

To enable dark mode in Laravel Breeze, you need to make some changes to the app.blade.php file, which is located in resources/views/layouts. This file is the base template of your application.

Add a button that allows users to toggle between light and dark mode. Here’s an example of how you can do it:

<button id="toggle-theme">Toggle Dark Mode</button>

Step 3: Apply styles for dark mode

Once you have the toggle button, you will need to apply the corresponding styles for dark mode. This can be achieved using CSS. It is advisable to add specific classes for dark mode to your CSS file.

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

Make sure that in the JavaScript file (which is usually located in resources/js/app.js), you include the logic to toggle the style classes when the user clicks the button.

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

Step 4: Save user preference

To enhance user experience, it is advisable to remember their preference between sessions. You can use JavaScript's localStorage to store the user’s choice:

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');
});

Conclusion

Enabling dark mode in Laravel Breeze is a straightforward process that can significantly enrich the user experience. With just a few steps, you can offer this option in your application, allowing users to choose the appearance they like best.

If you want more related news or tips about Laravel, I invite you to explore more content on my blog. Don’t miss it!