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
Do you retroactively apply web accessibility (WCAG) to your apps, or is it already on your backlog for this sprint? Then you need to read this article. We – all frontend developers – are approaching WCAG completely wrong. It’s part of our job, but we treat it as an afterthought. Stop the bullshit about being EAA-compliant and make accessibility a real part of your work.
Do you ever feel like the frontend of every website and application has become increasingly complex over time? In the past, we built everything using CSS, HTML, and a little bit of JavaScript, but now everything is done with Angular, React, or Vue, with just a bit of CSS and HTML. What has changed, and is this shift actually a positive one?
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,…