With the release of MacOS Mojave and the beta of iOs 13 it's possible to bring the system wide darkmode to the web. Using dark colors instead of white reduces glare, which in turn reduces eye fatigue. Most importantly, Dark Mode can improve your ability to see certain aspects of video and photos, such as color and detail. So on paper it sounds like something we really want to bring to all our websites.
Safari comes with a new media query to create a block in your css which will be activated when dark mode is enabled and is called "prefers-color-scheme". It could be used as:
@media (prefers-color-scheme: dark) { }
Possible options for "prefers-color-scheme" are "dark", "light" and "no-preference".
If you want to show dark images when dark mode is enabled you could benefit from the same media query as in the one your stylesheet. A downside is that you have to upload a second image to your webserver as you will show a different image to your visitor.
<picture>
<source srcset="dark.png" media="(prefers-color-scheme: dark)">
<img src="light.jpg">
</picture>
The support for dark mode is still limited. Today (June, 2019) the following browsers do support dark mode:
Author:
Jasper Seinhorst
What is WCAG? Before I dive into the details of web accessibility, let me explain in my own words what it actually is. WCAG stands for Web Content Accessibility Guidelines. It’s a set of guidelines designed to ensure that websites and web applications are accessible to everyone, including people with disabilities…
Introduction In this blog, I would like to share my opinion on how we, as front-end developers, often make projects unnecessarily complex. We often think we’re doing the right thing, but are we? Where we used to say we could build a website in just a few days, now we provide timelines at the infamous Scrum…
Since my childhood, I have been passionate about cars and everything related to them. Even at a young age, I knew every model. I spent hours flipping through car magazines searching for new facts and always dreamed of owning an exotic car. Initially, I used to dream of owning a Ferrari, but as I grew older and wiser,…