← Back to home
No preference detected
Whoops, it seems like your browser doesn't support dark/light mode
CSS pure
Examples

Media query for light mode

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

Media query for dark mode

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}
Using Tailwind CSS
1. Use/install Tailwind CSS

If you are not using Tailwind CSS, I would recommend reading their documentation and consider using it it's freaking awesome!

2. Edit tailwind.config.js

Add the following extends to the tailwind config.

module.exports = {
    theme: {
        extend: {
            screens: {
                'dark': {'raw': '(prefers-color-scheme: dark)'},
                'light': {'raw': '(prefers-color-scheme: light)'},
            },
        }
    }
}
3. Re-build your CSS

Of course, you have to re-build your CSS, but this depends on your setup.

Tailwind CLI

npx tailwindcss build styles.css -o output.css

Laravel Mix

npm run production
4. Using the variants

After step 3 you can use the following variants light: and dark:

Default light application

<div class="bg-white text-black dark:bg-black dark:text-white"></div>

Default dark application

<div class="bg-black text-white light:bg-white light:text-black"></div>
Stack Overflow
Dark mode

I am an immense fan of dark mode, so I recommend everyone to implement it in their web application. I have a very comprehensive answer on Stack Overflow.