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
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