Yeah I agree with you. The dark/light mode toggle is a really popular feature and can really enhance a website.
Just from an accessibility point of view, If I was to have a toggle on my website I would first let it default to my OS dark/light mode.Then as that changes on the site you could consider then to use local storage.
We have a media query in CSS called prefers-color-scheme which we can access in JS with window.matchMedia.
web.dev/prefers-color-scheme :
This blog is really worth a read. It even talks about only loading CSS we need and not loading non critical CSS. You can also see the power of custom properties.
Hey Matthew,
Yeah I agree with you. The dark/light mode toggle is a really popular feature and can really enhance a website.
Just from an accessibility point of view, If I was to have a toggle on my website I would first let it default to my OS dark/light mode.Then as that changes on the site you could consider then to use local storage.
We have a media query in CSS called
prefers-color-schemewhich we can access in JS with window.matchMedia.web.dev/prefers-color-scheme :
This blog is really worth a read. It even talks about only loading CSS we need and not loading non critical CSS. You can also see the power of custom properties.
I will definitely read it because the preferred color scheme is a great feature to implement as well! Thanks Gary!