How to Toggle Dark Mode Using HTML, CSS, and Javascript
Hey guys
In this video I show you how to toggle between a light and dark mode theme using just HTML, CSS and Javascript.
This video talks about color schemes and the color-scheme property. How we can utilize this along with the prefers-color-scheme media query to enable different theme for both light and dark modes.
I then show you how to implement toggling between light and dark mode using javascript and localStorage.
Sections in this video.
00:00-00:20 – Introduction
00:21-06:12 – Color Schemes and the color-scheme property
06:13-10:39 – Color Preferences and the prefers-color-scheme media query
10:40- 21:44 – Toggling Color Schemes using Javascript
21:45-31:29 – Storing Color Preferences in localStorage
31:28-31:37 – Outro
source