Supporting Dark Mode with CSS
In this screencast, I build upon the link-in-bio website from the HTML & CSS tutorial and add support for Dark Mode styles by targeting the prefers-color-scheme media query and adjusting the color values.
Support both Light and Dark Mode styles is a fantastic way to show users you care about how they use your site by supporting their preferences. It's also pretty fun to do!
Chrome's Dev Tools has a quick way to toggle between Light and Dark, making the development workflow even easier.
View the blog post with additional approaches with the code, including using CSS variables: https://code.brettchalupa.com/support...
You can see the live site with Dark Mode support here: https://brettchalupa.neocities.org/
View the diff of the additions from the previous episode: https://github.com/brettchalupa/scree...
View the full page source: https://github.com/brettchalupa/scree...
MDN docs on prefers-color-scheme: https://developer.mozilla.org/en-US/d...