Enabling Support for Dark Mode in your Web Application

Introduction to Dark Mode

MacOS introduced Dark Mode, wherein dark colors are used instead of light colors for user Interface. The dark mode is everywhere from Mac, Windows, Android, and now on the iPhone and iPad. It is a support system that can be used to display dark surfaces on the UI. Dark Mode having light text and the dark background is mostly used to reduce eye strain in low light conditions & blue light.

Impact of Dark mode felt less in Safari, and it’s because almost all the websites and web-apps built till date are not designed to support dark mode. In Apple’s browser, the title bar at the top turns black, but web pages are displayed in the same manner as they are in regular, light mode. All that whiteness and brightness can be jarring against the dark elements of dark mode.

What can we do?

We should also build our websites and applications which are compatible with dark mode. But first, let’s take a look at how we can enable dark mode in iOS or Windows devices.

·         Enable Dark Mode in Windows 10.

Go to Settings > Colors > Choose your default Windows Mode > Dark.

·         Enable Dark Mode in iOS (Macbook/MacMini).

Go to System Preferences > General > Dark.

·         Enable Dark Mode in iPhones/iPad.

Go to Settings > Display & Brightness > Dark.

How can we do that?

There is this super new feature media query based on the user’s operating system set theme, called as prefers-color-scheme. You can add any CSS which you want to show, just like regular device responsive media query.

Method 1: This is a normal method with normal variables set to both the modes.

“prefers-color-scheme: dark”

To check if this media query works, change your theme preference to ‘dark’.

@media(prefers-color-scheme: dark){ background-color: $dark-mode-background; color: $dark-mode-text-color;

“prefers-color-scheme: light”

Similarly, for the light theme, we have another media query.

@media(prefers-color-scheme: light){ background-color: $light-mode-background; color: $light-mode-text-color;

Method 2: We can set CSS variables for changing themes, CSS variables start with two dashes (–) and they are case sensitive.

As we are changing the theme, we can define CSS variables in the global scope, i.e. in: root or in body selector.

:root{

–bg: #fff;

@media(prefers-color-scheme: dark){

–bg: #000;

}// change your OS into dark theme to see magic of color-scheme..

The link to explain this feature media query, try toggling between your OS Dark Mode for better understanding: https://codepen.io/shwetabhagre/pen/yLyNXOd

Do You Use Operating System’s Dark Mode?

Because this is a very new feature, people get confused with respect to the usage. Well, we found a survey that will help us to decide do people really use dark mode, or when they like to and not like to use dark mode.

Conclusion:

• As a new feature, Dark Mode supports only updated browsers. In the case of older versions of browsers, we need to add traditional CSS to avoid
• Below chart shows Browser support for prefers-color-scheme

You May Also Interested In: IOS – 13 Dark Mode Support