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.
Media query for light mode
/* Light mode */
@media (prefers-color-scheme: light) {
body {
background-color: #000;
color: white;
}
}
Media query for dark mode
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: white;
}
}
If you are not using Tailwind CSS, I would recommend reading their documentation and consider using it it's freaking awesome!
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)'},
},
}
}
}
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
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>