How to add a simple dark mode
I’ve used these few lines of CSS to apply dark mode to my website:
@media (prefers-color-scheme: dark) {
body {
filter: invert(100%);
background-color: rgb(29, 32, 31) !important;
}
img,
.astro-code,
.emoji,
iframe /* for recaptcha */ {
filter: invert(100%) !important;
}
}
Looks pretty good!
→ Here's my latest YouTube video
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025