Dark mode support in website

Spread the love

I am a Windows 10 user and one of the main feature that I like about it is – Dark Mode. Not just because its soothing on the eyes, but it makes the UI look so simple and elegant. In fact, majority of the applications I use, have dark mode/theme enabled. Be it IntelliJ Idea’s Darcula theme or Visual Studio code. This led me to explore whether there is built-in support for Dark mode in websites and to my surprise there is one.

Standards

Majority of the websites are realizing the fact that just by throwing a random color at users is not going to work. Rather many people are of opinion that they wish the website could honor their simple request of dark mode. Keeping this requirement in mind, CSS3 came up with special media attribute prefers-color-scheme.

caniuse.com revealing the support

There is a wide support for this feature on various browsers that are popular today – Chrome, Firefox, Safari, Android browser etc.

Implementation

The idea is pretty simple, if user has selected dark mode for his/her OS, then you must apply appropriate styles which will resemble close to it and vice-versa for light mode. Here is a step by step approach to achieve the same.

Quick and Easy

Lets not waste your time any further. Here is a quick example of how you can adapt to user preferences.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Greetings!!!</title>
    <style>
        * {
            box-sizing: border-box;
        }

        html,
        body {
            padding: 0;
            margin: 0;
            font-size: 15px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }

        .container {
            width: 100vw;
            display: flex;
            flex-direction: column;
            align-items: space-around;
            margin: 20px 0;

            padding: 10px;
        }

        .title {
            font-weight: 700;
        }

        .card {
            width: 600px;
            padding: 10px 15px;
            font-weight: 400;
        }
    </style>
    <link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
    <link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
</head>

<body>
    <div class="container">
        <div class="title">Hello There!!!</div>
        <div class="card">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque voluptate, corporis ipsa facere aut
            excepturi aliquam nam non, totam ipsum amet cupiditate voluptates? Illum unde autem repellat maiores,
            molestias reiciendis.
        </div>
    </div>
</body>

</html>

We start with the very basic example – a simple container with a card inside in it. The style tag in head section defines common look and feel properties like font size, font family, weight padding etc. We are deliberately trying to avoid color options in the style.

The next two tags linking to external stylesheet are important. Specially pay attention to media attribute.

Here is how the dark.css looks like



body {
    color: white;
}

.card {
    background-color: yellow;
    color: black;
}

.container {
    background-color: black;
}

Here is what goes inside light.css



.card {
    background-color: gray;
}

.container {
    background-color: lightgray;
}

In case of dark.css, we specify media attribute as (prefers-color-scheme: dark). While on the other hand, we ensure that if there are no preferences or the theme mode is light, the light.css should be loaded ((prefers-color-scheme: no-preference), (prefers-color-scheme: light)).

Here is the quick preview of what it looks like in Dark Mode

Dark Mode – Windows 10

Switching to light mode in Windows 10 using Colors option

Windows 10 – Colors to switch theme mode

And finally with Light mode turned on

Light Mode – Windows 10

The results are instantaneous.

Modularize Style definition

Above example doesn’t consider any best practices. For a production grade website, refer to following guidelines.

Make sure that you have atleast 3 different CSS files.

  • Style definition for Dark variant
  • Style definition for Light variant
  • Common styles across application

The common style definition should focus on layout, component dimensions and responsiveness of site. The Dark and Light variant will have color schemes for its matching environment.

CSS Variables

Make use of CSS variables to define the primary, secondary (accent) and tertiary colors for your website. While this is not mandatory, it will be a good practice to reuse color definition and also to refactor in future.

Images, Elements, Filter

While color schemes play major role in implementation of Dark mode, you must pay attention to other visual elements in your web page – images, videos, animations etc.

Usually the images in Light mode are brighter, while in case of Dark mode it has bit of a Gray shade. Effect like this can be easily achieve using SVG Filters.

Similarly the visual elements which change their color on mouse hover or click must be styled to address Dark/Light mode.

Google to the rescue

Do you wish to provide control to your users, but don’t have enough time to develop a component? Don’t worry, Google has developed a component which you can easily add to your website or web application. Check this link for Google Github Repository.

Bonus: Check this link for Material Design which outlines detailed differences between light and dark mode.