Dark mode on your website

Dark mode on your website

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.

In your stylesheet

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".

In your HTML document

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>

Support

The support for dark mode is still limited. Today (June, 2019) the following browsers do support dark mode:

  • Safari 12.1 or newer
  • Chrome 73 or newer
  • Firefox 67 or newer
  • Safari on iOs 13 or newer

Read more about:

How I added my Porsche EV to Homekit

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,…

Reading time: 12 minutes

Continue reading

CSS-only Carousel Slider

As a frontend developer, my days are primarily filled with crafting JavaScript-based components using frameworks like Vue, React, or Angular. These frameworks excel at empowering me to create reusable frontend elements, whether it's buttons, modals, links, or accordions. However, as I reflect on my reliance on these…

Reading time: 4 minutes

Continue reading

Homekit `Power consumption` sensor

Recently, I purchased a HomeWizard Wi-Fi P1 Meter. This device provides me with insights into the electricity and gas usage in my home. With 4 solar panels installed, I anticipate generating excess electricity during the spring and summer months. Despite knowing the capacity of the panels, I am unsure of the exact…

Reading time: 7 minutes

Continue reading