Dark Mode Quirks with Flowbite in Laravel & Tailwind CSS v3

Recently, I dived deep into a minor hiccup I faced while tinkering with the fabulous Tailwind CSS, specifically its version 3. Let’s talk about the « dark mode » configuration.

I’m a fan of dark themes (easy on the eyes, right?), so I had my macOS and Chrome browser set to night mode. While Tailwind CSS v3 promised that the media setting for dark mode (using the prefers-color-scheme media query) would be activated by default, my site begged to differ! ??

The twist in the tale? After integrating the Flowbite plugin, my site decided to play hide-and-seek with the dark mode. The solution, though simple, was a bit unexpected. I had to explicitly set darkMode: 'media' in my tailwind.config.js file. Just like that, the night magic was back!

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './node_modules/flowbite/**/*.js'
    ],

    darkMode: 'media',

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, require('flowbite/plugin')],
};

So, if you’re mixing Flowbite with Tailwind CSS v3 in Laravel and facing a similar dark mode puzzle, remember to define your dark mode preference. It’s these quirky adventures that keep our developer lives interesting, isn’t it?

If you have any similar tales, I’d love to hear them!