Going Dark & Bright

Sometimes we all need a challenge. Mine was to find out how much effort it would be to support Apple’s new Dark Mode on Colloq. It turned out that it was more work than initially anticipated, but I stayed on it for a couple more hours, cleaned up code and eventually made it work. Since today, you may see various differences throughout the entire interface.

What’s Dark Mode

First of all I want to explain what I’m talking about. With macOS Mojave, Apple introduced a new color scheme called “dark mode”. When activated, the entire operating system switches to a dark appearance, which is quite nice for several circumstances. Some people might just prefer it over the light default mode we’re used to ever since.

When Apple announced this feature, it was only a matter of time that web developers would talk about getting some sort of query to detect the color mode and WebKit shipped a new Media Query in their Safari Technology Preview 68 on October, 24th 2018.

Prefers-color-scheme

With the new Media Query web developers can now target light and dark mode users specifically and adapt their pages to the chosen user preference:

body {
     background-color: white;
     color: black;
}

@media (prefers-color-scheme: dark) {
     body {
          background-color: black;
          color: white;
     }
}

If you test this in any of the current Safari Technology Previews you can see what it does to your webpage by switching the OS theme in your settings. Quite nice, right?

A cleanup opportunity

When I started researching how I can support this on Colloq, I realized a few things regarding our CSS codebase. First, we wrote all color values as hex codes all the time, not variables. This now became a problem, because it would have meant to write a dark mode media query for every color occurrence in our CSS.

CSS Custom Properties

My first task was to convert all existing color values into Custom Properties which in this case, serve as our color variables.

Color Palettes

When designing for two entirely different color schemes, it doesn’t take long until you realize that your current color palette is not going to work. A nice light grey border in light mode might look very ugly in dark mode.

Colloq is now bright and dark

If you access Colloq with a browser and OS that supports the new Media Queries already, you will get your preferred color scheme on our website as well. Of course not everything is perfect yet, but we think it’s good enough for a first version to be pushed out to our users.

Colloq’s Bright Scheme

Colloq’s Dark Scheme

Your feedback is always very valuable, please let us know your thoughts and how you like it. If you encounter any bugs or have difficulties with some contrasts or colors, please also let us know, so we can fix it.

Have a good day, enjoy Colloq in whichever mode you prefer and discover some new events!