Ultimate Guide to dark mode(2020): For Developers

Ultimate guide to dark mode

What is Dark mode?

A dark mode displays dark surfaces across the majority of a UI. It reduces the luminance emitted, still maintaining the proper color contrast.

We always think that dark mode is just color switch between light to dark color(say: white to black) but it is more than that. It involves deeper insights of color contrast, grayscale, etc

A dark mode uses greyish color more instead of perfect black because it is easier to see shadows, elevation, depth of an object on grey color instead of black color.

Video by Google

Important fundamental of dark mode to follow:

  • Contrast – It is a very important property because the dark mode is just a game of contrast. According to google dark mode design docs, it is good to have dark surfaces and 100% white body text have a contrast level of at least 15.8:1
  • Limited Color – The Second most important fundamental property is color. It simply means do not overuse colors, keep things minimal and simple. Use a darker color(mainly grey) for larger surfaces with limited color accents.
The ultimate guide to dark mode(2020): For Developers 1 » Csspoint101
Source:Material.io
  • Higher elevation, lighter surface – As a surface raises in elevation, it becomes lighter in color.
The ultimate guide to dark mode(2020): For Developers 2 » Csspoint101
Source: Material.io

Pros of Dark mode :

  • It reduces eye strain.
  • Dark mode saves energy on high energy-consuming screens like – OLED, AMOLED, etc.
  • Enhance accessibility for users(Gives options to choose from).
  • It looks stunning

Cons of Dark mode :

  • In bright light conditions, it sucks, causes more eye strain.

Is Dark mode better for your battery?

Does dark mode really saves battery or it is just a myth? If yes than how it save’s , how it works underhood, let’s find out together.

So simple answer is yes it does but that is not absolutely true because dark mode saves battery only if you are using any OLED or AMOLED screen devices.

You must be thinking but why? Here’s the simple answer, on OLED pixels draw very little power on all-black but LCD screens draw same amount of power whether it is all-black or all-white.

The ultimate guide to dark mode(2020): For Developers 3 » Csspoint101
This image from slashgear.com shows OLED v/s LCD power consumption

As you see in above image that OLED power consumption of Pixel’s considerably dropped from 250 mA to 92mA while iPhone LCD screen remained at 230mA, which shows us that dark mode only works with OLED screens.

mA stands for milliamps = A milliamp is a unit for measuring electrical current equal to one thousandth of an ampere.

The other factor that affects dark mode power consumption is which color you are using in your UI because certain color consumes more power than others.

The ultimate guide to dark mode(2020): For Developers 4 » Csspoint101
Source: Slashgear.com

As it shows black barely consumes any power while white consuming triple the power at max brightness. That’s why dark mode works because it uses black and avoids usage of white color to reduce the power consumption.

Video demonstrating dark mode saves battery

Some tips for better dark theme designing

  • Avoid Pure Black/White
  • Avoid Saturated Colors usage
  • Accessibility and Contrast: Dark theme surfaces must be dark enough to display white text
  • Allow users to switch from regular to the dark mode
  • Elevation is important: The more elevated the surface is, the stronger and brighter the overlay becomes.
  • Avoid large colored areas
The ultimate guide to dark mode(2020): For Developers 6 » Csspoint101
Source: snapp mobile
  • Don’t convert Light to Dark: Just converting colors from the light to the dark variants doesn’t produce a good result.
The ultimate guide to dark mode(2020): For Developers 7 » Csspoint101

You can read this complete guide to Dark theme designing: visit

Some good color combinations for dark theme

The ultimate guide to dark mode(2020): For Developers 8 » Csspoint101
The ultimate guide to dark mode(2020): For Developers 9 » Csspoint101
The ultimate guide to dark mode(2020): For Developers 10 » Csspoint101

Other color combinations you can find here: visit

Good examples of Dark mode theme design

The ultimate guide to dark mode(2020): For Developers 11 » Csspoint101
Source:visit
The ultimate guide to dark mode(2020): For Developers 12 » Csspoint101
Source:visit

Big Companies using dark mode

As dark mode is becoming important in 2020 for the user so big companies are shifting towards it. Many big companies have adopted dark mode feature in there app so here’s the list of big companies using dark mode

  • Whatsapp: One of the biggest social media platform
The ultimate guide to dark mode(2020): For Developers 13 » Csspoint101
Image credit:Facebook; Shutterstock
  • Instagram
The ultimate guide to dark mode(2020): For Developers 14 » Csspoint101
Image credit:instagram-engineering.com
  • Facebook
The ultimate guide to dark mode(2020): For Developers 15 » Csspoint101
Image credit:venturebeat.com

Dark Mode: For Developers

Best Dark Mode Javascript Libraries

  • Darkmode.js: This library uses the CSS mix-blend-mode in order to bring Dark Mode to any of your websites. Just copy-paste the snippet and you will get a widget to turn on and off the Dark Mode.
The ultimate guide to dark mode(2020): For Developers 16 » Csspoint101
Image credit : bashooka.com
  • Background Check: Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
The ultimate guide to dark mode(2020): For Developers 17 » Csspoint101
The ultimate guide to dark mode(2020): For Developers 18 » Csspoint101
  • Nightly.js: A zero dependency javascript library that enables the night mode on your website easily.
The ultimate guide to dark mode(2020): For Developers 19 » Csspoint101

How to achieve the Dark theme without JS library

We can achieve dark theme using prefers-color-scheme and HTML[data-theme] .

What is prefers-color-scheme ?

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system to use a light or dark color theme.

light Indicates that user has notified the system that they prefer an interface that has a light theme.

dark Indicates that user has notified the system that they prefer an interface that has a dark theme.

Code example :

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}
Video credit: Red Stapler

Dark mode toggle effect[using data theme]

You can achieve night mode toggle effect by different methods like Js library(darkmode.js) etc. But we are going to find out how we can do this using vanilla javascript and [data theme], which is pretty cool.

Here’s a little project that demonstrates how to use data theme to obtain dark mode in your web project.

Here’s what we are creating

The ultimate guide to dark mode(2020): For Developers 20 » Csspoint101

Html

    <div class="container">
        <h1>Dark Mode Toggle</h1>
        <div class="toggle-container">
            <input type="checkbox" id="switch" name="theme" /><label for="switch">Toggle</label>
        </div>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ducimus repellendus dolorem eum consequatur id exercitationem nesciunt, inventore modi perferendis impedit esse, tempora officia, ipsam quae libero. Nostrum, alias dignissimos.</p>
    </div>

Css(Sass)

html {
    height: 100%;
    font-family: 'Montserrat';

    display: grid;
    align-items: center;
    justify-items: center;

    --bg: #FCFCFC;
    --bg-panel: #EBEBEB;
    --color-headings: #0077FF;
    --color-text: #333333;
}

html[data-theme='dark'] {
    --bg: #333333;
    --bg-panel: #434343;
    --color-headings: #3694FF;
    --color-text: #B5B5B5;
}

body {
    background-color: var(--bg);
}

.container {
    background-color: var(--bg-panel);
    margin: 5em;
    padding: 5em;
    border-radius: 15px;

    display: grid;
    grid-template-columns: 80% auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "title switch"
        "content content";

    h1 {
        margin: 0;
        color: var(--color-headings);
    }

    p {
        color: var(--color-text);
        grid-area: content;
        font-size: 1.1em;
        line-height: 1.8em;
        margin-top: 2em;
    }
}



input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

label {
	cursor: pointer;
	text-indent: -9999px;
	width: 52px;
	height: 27px;
	background: grey;
	float: right;
	border-radius: 100px;
	position: relative;
}

label:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}

input:checked + label {
	background: var(--color-headings);
}

input:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

label:active:after {
	width: 45px;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}

Javascript

        var checkbox = document.querySelector('input[name=theme]');

        checkbox.addEventListener('change', function() {
            if(this.checked) {
                trans()
                document.documentElement.setAttribute('data-theme', 'dark')
            } else {
                trans()
                document.documentElement.setAttribute('data-theme', 'light')
            }
        })

        let trans = () => {
            document.documentElement.classList.add('transition');
            window.setTimeout(() => {
                document.documentElement.classList.remove('transition')
            }, 1000)
        }

Frequently Asked Questions (Dark Mode)

Is Dark mode better for your eyes?

Yes( not that much), but it’s not necessarily easier on your eyes. In bright environments, light mode could be easier on your eyes and make you more productive. If you do like dark mode, use it!

What is Dark mode?

Dark mode displays dark surfaces across the majority of a UI. It reduces the luminance emitted, still maintaining the proper color contrast.

Is Dark mode better for your battery?

Yes, it does but that is not absolutely true because dark mode saves battery only if you are using any OLED or AMOLED screen devices.

How to achieve dark mode in Css?

You can achieve dark mode by using prefers-color-scheme and HTML[data-theme]

What are the best Dark Mode Javascript Libraries?

Thanks for reading my article.Do share with others if it added value to your life and also check out post on how to create svg animation.

Default image
JatinRaj
Hello, My name is Jatin Raj and I am a web developer from India. I love to code every single day and share my thoughts with you people. Hobbies include reading books, football, and sketching/Painting.