Dark Mode

History

1987

Present Day

1948

In 1984, the first programmable computer, named the "Manchester Baby", was powered by powerful cathode ray tubes or CRTs, first implemented for the use of radar screens during WWII. Built-in electron guns were used to target and illuminate phosphors that were placed behind glass screens, giving them the "neon" green illumination against a dark screen.
As a result, the earliest computer ran on dark mode by default!

Late 1980s

As computers were becoming more and more mainstream after the release of home computers such as the Apple II in 1979, the desire for monochromatic screens were decreasing. The rise of positive polarity (dark text on light background) was adopted for computer interfaces due to the industry wanting to create a familiar working environment for users - to emulate writing on paper.

2000s

By the mid 2000s, LCDs had replaced the majority of CRTs used in laptop and desktop displays, due to the higher image quality and reduced power consumption. This trend paved the way for LED displays, which utilize crystals combined with a more precise backlight to offer stunning visuals and vibrant screens.

2019

The popularity of dark mode experienced a revival when leading technology corporations such as Google and Apple rolled out dark themes for their Android and iOS platforms. These introductions were highlighted at the Google I/O and Apple WWDC events in 2019. The promotion of dark mode emphasized its benefits, shown further in the section below, which includes minimizing eye strain, enhancing concentration, and extending battery life on electronic devices.

2024

Nowadays, dark mode is a feature that’s broadly accessible across a multitude of operating systems, apps, and web platforms. It is now considered a personal preference on whether dark mode is used, serving to accommodate the comfort and digital preferences of users.

Benefits

Reduced Eye Strain

Dark mode can decrease eye strain, especially in low-light conditions, making it easier to read text on screens

Enhanced Accessibility

Individuals with light sensitivity or certain visual impairments may find dark mode more comfortable to use

Aesthetic Appeal

Many users find dark mode aesthetically pleasing, associating dark colors with luxury and elegance

Improved Sleep Quality

By decreasing blue light exposure, dark mode may help improve sleep quality if used during the evening or before bedtime

Increased Focus

The reduction or elimination of screen flickering and higher contrast in dark mode can potentially increase focus and reduce distractions

Battery Savings

On devices with OLED or AMOLED screens, dark mode can significantly reduce power consumption, leading to longer battery life

Implementation

Do you want to implement dark mode on your own website?

There are several ways to implement dark mode into your project but here’s a step-by-step tutorial on how to implement dark mode using the useContext hook in React and Tailwind CSS, with the same techniques used to build this page too!

Have a project set up using Create React App or Vite with React and Tailwind CSS installed and ready to go. Refer to the React Docs and Tailwind Docs if you are having trouble getting set up.

Step 1: Create a Context for the Theme

At the highest level component in your application, this is usually your App.js file, you need to create a context that will hold the state of your theme. Import useContext from React and create an instance of the context. Export it so you can reference it in other components.

import { createContext } from 'react'

export const ThemeContext = createContext(null)

Step 2: Add a Theme State

Add a theme state to your App component. For this website, I had defaulted to dark. Make sure to import useState as well.

const [theme, setTheme] = useState('dark')

Step 3: Wrap Context around App with the Theme Provider

Anywhere in your application, you can now use the useContext hook to access the dark mode state and the function to toggle it. Pass in the states you want access to in the child components in the value prop of the ThemeProvider.

<ThemeContext.Provider value={{ theme, setTheme }}>
    {/* Your Child Components*/}
</ThemeContext.Provider>

Step 4: Add theme to data-theme attribute in main element

Here is where you can take many routes to apply the theme to your project. In this website, the theme state is provided as a data-attribute in the <main> element. This is done because, we can easily access the data-theme attribute using the main[data-theme='dark'] selector.

<ThemeContext.Provider value={{ theme, setTheme }}>
    <main data-theme={theme}>
        {/* Your Child Components*/}
    </main>
</ThemeContext.Provider>

Step 5: Add theme colour variables in the index.css file

In the index.css file, declare your chosen colours as variables using the data-theme selector. If you are using Tailwind, remember to also declare the names in the tailwind.config.js file. Now you can use these styles as normal Tailwind classes e.g. bg-background-color. This way you can use the same colour tokens and will switch accordingly to the theme selected

main[data-theme='dark'] {
    --background-color: #your-colour-here;
    --text-color :#your-colour-here;
}
main[data-theme='light'] {
    --background-color: #your-colour-here;
    --text-color: #your-colour-here;
}

Step 6 : Use the Theme Context in Components

Anywhere in your application, you can now use the useContext hook to access the dark mode/theme state and the function to toggle it.

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const SomeComponent = () => {
    const { theme, setTheme } = useContext(ThemeContext);

    return (
    <div className={theme ? 'dark' : 'light'}>
        <button onClick={setTheme}>Toggle Dark Mode</button>
      {/* Rest of your component */}
    </div>
    ); 
};

And there you go!

You have now made a working dark mode theme for your project with a few simple steps. Of course, this is one of many ways you can implement dark mode into your project but this should be sufficient for any simple website that you want to elevate the design to the next level!

It is time to join the Dark Side!

Gallery

Some examples of clean-looking dark mode websites

VueJS

Studio Maertens

Genesis Blockchain

Aimpie

Endless Tools