Detecting System Dark Mode in Laravel Applications

Dark mode has become a widely adopted feature in modern user interfaces, improving readability and reducing eye strain in low-light environments. If you’re building a Laravel application and want to personalize the experience based on the user’s system theme (dark or light mode), this blog will walk you through detecting the user’s preference and integrating it into your Laravel application.

Since Laravel is a server-side framework, detecting a user’s dark mode preference must be handled on the client side (via JavaScript) and then shared with the Laravel backend if necessary.

Why Detect Dark Mode?

Enhance user experience
Match user system preferences
Personalize theming and UI automatically

Step 1: Detect Dark Mode in JavaScript

The easiest way to detect dark mode is using the window.matchMedia API:

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode ? 'Dark Mode' : 'Light Mode');

This line checks whether the user prefers a dark color scheme and returns true or false accordingly.

Step 2: Send Preference to Laravel (Optional)

If you want Laravel to be aware of the user’s theme (e.g., to apply it during initial page load), send it to the server using AJAX.

Add CSRF Token in Your Blade Layout:

<meta name="csrf-token" content="{{ csrf_token() }}">

JavaScript to Send Theme Preference:

fetch('/api/store-theme-preference', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
  },
  body: JSON.stringify({ darkMode: isDarkMode })
});

Step 3: Laravel Route and Controller Logic

Add Route in `routes/api.php`:

use Illuminate\Http\Request;

Route::post('/store-theme-preference', function (Request $request) {
    session(['dark_mode' => $request->darkMode]);
    return response()->json(['status' => 'saved']);
});

This stores the preference in the session, which can be accessed in Blade or controllers.

Step 4: Use Theme in Blade Templates

In your layout view (resources/views/layouts/app.blade.php), add a conditional body class:

<body class="{{ session('dark_mode') ? 'dark' : 'light' }}">

This enables you to apply dark or light theme styles globally.

Step 5: Style the Themes (Optional)

Using Tailwind CSS or custom classes, define styles:

body.light {
  background: #fff;
  color: #000;
}

body.dark {
  background: #121212;
  color: #fff;
}

Or with Tailwind CSS:

<body class="{{ session('dark_mode') ? 'bg-gray-900 text-white' : 'bg-white text-black' }}">

Bonus: Toggle Theme Manually

You can allow users to override system preferences using a toggle button. Store the override in localStorage and use that instead of matchMedia.

const toggle = document.getElementById('toggleTheme');
toggle.addEventListener('click', () => {
  const current = localStorage.getItem('theme');
  const newTheme = current === 'dark' ? 'light' : 'dark';
  localStorage.setItem('theme', newTheme);
  document.body.className = newTheme;
});

Conclusion

Dark mode detection in Laravel applications isn’t handled server-side. But with a touch of JavaScript and an optional Laravel session store, you can create a modern, responsive experience that adapts to users’ system settings.

This approach is ideal for:

Public websites
Admin dashboards
Personalization-focused applications

By integrating theme detection and storage, you’re providing a more delightful and inclusive user experience.

Author: Manoj Damor

Post Views: 14