29 likes
·
186 reads
3 comments
Nice article. But I was like, "How do a User switch between both modes?". I'll be super grateful to get an answer to that.
With this approach, there is no active switch. If the operating system supports Dark Mode, the CSS respects that global setting.
Like when I go into my iPhone’s settings and switch EVERYTHING to Dark Mode (Settings.app → Display & Brightness → Appearance). macOS has a similar setting. I don’t know where to find it on Android, Windows, or Linux.
If we wanted an active toggle a visitor can use, we’d have to use JavaScript instead of (or possibly in addition to) this media query.
You can see a demo of this by switching your phone from light to dark mode on twitter.com, they seem to use this method. I added it to my site just last week: islovely.co/posts
Thanks for taking out time to answer. I have learned a lot.