With the most recent iOS and macOS release, we are seeing support for Dark Mode in iOS applications, macOS applications, and even websites. Because of the recent support and influx of dark mode users, I decided to create a dark mode version of my website. I recently read about the CSS support for this feature on Reddit, then decided to give it a shot. There are also other great accessibility releases in Media Queries Level 5 such as prefers-contrast, inverted-colors, and more.
Dark mode for the people.
With the most recent iOS and macOS release, we are seeing support for Dark Mode in iOS applications, macOS applications, and even websites. Because of the recent support and influx of dark mode users, I decided to create a dark mode version of my website. I recently read about the CSS support for this feature on Reddit, then decided to give it a shot. There are also other great accessibility releases in Media Queries Level 5 such as prefers-contrast, inverted-colors, and more.
Example
This simple addition to your sass will take care of it all for you.
Support
At the moment it looks like Chrome, Firefox, and Safari are the browsers that support this feature. Edge, Internet Explorer, and Opera do not. On mobile, we have Android, Chrome, Firefox, and Safari support as well. You can read more about the browser support here.
Light Mode & Dark Mode
Huge thanks to Anthony Boyd for the mockups. I frequently use his mockups for my work and I 100% recommend checking out his work.
