To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

A look at a new CSS feature (May 2019)

23 May 2019 at 18:22
Here's a look at one of the new features to CSS as of May 2019

The prefers-color-scheme is a new feature that is of particular interest to me. A few years ago, slightly after Mac OS X offered a dark mode, I also decided to offer a little dark mode feature on my website. Years later I removed this because it was extra JavaScript that was unnecessary for everyday use. Now, dark mode is becoming more of a feature of modern operating systems (and macOS was one of the first to do this) and as a result, it is becoming more standardised.

Here's a little test. In light mode, this will appear as a black colour with white text whereas in dark mode it will appear as a gray colour with black text.


So what do I mean by standardised? Well, operating systems across the board are able to talk directly to browsers and indeed webpages being visited by those browsers and as a result tell them whether or not they have a feature enabled or not. One feature that is becoming standardised is this dark mode - something very commonly used by developers since it's better on the eyes. This dark mode feature informs the website that the page requested should be displayed in dark mode if possible. As mentioned, currently macOS and Windows 10 support this new dark mode standard and allows them to inform a website that the user is in dark mode.

As a developer, this interests me a lot and so I put together a simple bit of code to test it.

@media (prefers-color-scheme: dark) {
  #block_dark {
    border:1px #333 solid; 

This feature will definitely become more and more of a thing with websites such as Stack Overflow and other developer-central websites, as well as quite a lot of news sites because those websites predominantly focus on reading long pieces of text.