Featured

Responsive Web Design: Dark Mode with HTML, CSS & JS



Published
Learn how to implement dark mode on your site with `prefers-color-scheme` and local storage.

2:51 - `prefers-color-scheme` method
8:17 - Choosing accessible colours
14:32 - Implement user theme-toggle
35:05 - Save theme with LocalStorage
42:52 - Conclusion

***
Resources
- MDN `prefers-color-scheme` docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- Contrast Colour Checker: https://colourcontrast.cc/
- Written DarkMode Tutorial: https://medium.com/samsung-internet-dev/responsive-design-the-dark-mode-10f8f9ca2c2
- Dark Mode code/demo: https://glitch.com/edit/#!/lodelola-darkmode-tut

Follow me: https://twitter.com/lolaodelola
Category
Web design
Be the first to comment