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!
I wrote 21 books to help you become a better developer:
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- Svelte Handbook
- CSS Handbook
- Node.js Handbook
- Vue Handbook