Godswill Umukoro
Simplest way to Add Dark Theme to any Website

Simplest way to Add Dark Theme to any Website

Godswill Umukoro's photo
Godswill Umukoro
·

2 min read

The Problem

I like fancy websites. You know websites that have great UI/UX, impressive load time speed, pretty animations, Scalable Vector Images, Dark theme and light theme toggle button.

But the problem is... I suck at CSS and JS (at this moment, I'm working on it duh 🙄). As a result, many tutorials and blog articles on how to implement these fancy features on a website aren't exactly for me.

The question is: what's the simplest, most basic way to add dark theme functionality to my website? I'm also not interested in copying code I don't understand.

The Solution

The best way to learn they say is by building, so I woke up two days ago and was like, lets do this! My personal website could use a redesign so I said to myself, I'll rebuild my website and add that a dark theme functionality to it.

I chose to follow a minimalist design for he website. After writing some basic HTML and CSS, I added the dark theme functionality with the following CSS code:

/* Light mode by System theme */
@media (prefers-color-scheme: light) {
    body {
        background-color: inherit;
        color: inherit;
    }
}

/* Dark mode by System theme*/
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: whitesmoke;
    }
}

prefers-color-scheme checks if the user has selected light or dark theme. The user can do this either via the operating system settings or via the browser settings.

What does this mean?

  1. You website could look different on browsers. Light or Dark.
  2. You just implemented dark theme on your website with just a few lines of CSS code.
CSStricks