Okay... making a dark theme in CSS is not difficult. The Pure CSS part mainly refers to not having to toggle the dark theme on your website. To actually make a dark theme toggle, you'd need to use some JS.

There are also more ways to achieve a dark mode than the one I'm going to show you, but I believe this method to be the most convenient one.

What we'll be building

Changing your system's default color scheme will affect the colors of the component below.

What we will use

We're going to use two pretty awesome CSS features:

1. Custom properties (CSS variables)
2. Media queries (using prefers-color-scheme)

It is worth noting that both of these lack support in Internet Explorer.

The HTML

The HTML is going to be rather simple, just a container with two children.

<div class="container">
  <span class="title">This is a title</span>
  <p class="content">This is some content. I could use Lorem Ipsum here, but I was too lazy to google it and I don't believe CodePen has a built in Lorem Ipsum feature.</p>
</div>

As you can see, we have a .title and a .content. These will later be applied with some basic typography. Their main purpose is to give us something to look at.

The CSS

Custom properties

We're going to start with the most important part of our CSS, the custom properties. We will use two custom properties: --background and --color. These will be declared inside the :root pseudo-class.

:root{
  font-family: sans-serif;
  --background: #eee;
  --color: #222;
}

You probably noticed that we set the font-family to sans-serif. This is not important, it is just there to make the final result look slightly better.

Now, the benefit of setting these custom properties inside the :root is that they will be available everywhere in our CSS. Basically, they're in the global scope.

The container

Let's use those custom properties immediately. We'll set the background and color of our .container to their respective custom property.

.container{
  width: 300px;
  margin: auto;
  padding: 1rem;

  background: var(--background);
  color: var(--color);
}

The main point of interest is the last two lines. We're using the var() function to reference our --background and --color properties.

This is really the key to our dark/light mode implementation. This will make it easy to reassign those colors using the prefers-color-scheme media query later.

The title and content

Now, we'll just apply some simple typography to our .title and .content.

.title{
  font-weight: 600;
  font-size: 1.1rem;
}
.content{
  font-weight: 300;
  font-size: .9rem;
  line-height: 150%;
}

The media query

Earlier, we created our custom properties and assigned them color values. Now, we'll change those colors depending on the user's color theme settings.

This is done by using a media query with the prefers-color-scheme media feature.

@media (prefers-color-scheme: dark){
  :root{
    --background: #222;
    --color: #eee;
  }
}

As you can see, we're checking if the user has set their system settings to use a dark theme. If they have, then we change those custom properties to use different colors. In this case, we just switch the colors with each other so the text color becomes the background and vice versa.

That's really all there is to it.

Putting it all together

The HTML

<div class="container">
  <span class="title">This is a title</span>
  <p class="content">This is some content. I could use Lorem Ipsum here, but I was too lazy to google it and I don't believe CodePen has a built in Lorem Ipsum feature.</p>
</div>

The CSS

:root{
  font-family: sans-serif;
  --background: #eee;
  --color: #222;
}
.container{
  width: 300px;
  margin: auto;
  padding: 1rem;

  background: var(--background);
  color: var(--color);
}
.title{
  font-weight: 600;
  font-size: 1.1rem;
}
.content{
  font-weight: 300;
  font-size: .9rem;
  line-height: 150%;
}

@media (prefers-color-scheme: dark){
  :root{
    --background: #222;
    --color: #eee;
  }
}

If you change your system settings between light and dark, you'll see that the background and text of the component below will change.

Conclusion

This has been a very simple example of implementing a dark mode. For actual implementation, you'd need to use some JS to let the user switch between the modes.

You can take this idea and apply it to larger projects, and the actual amount of code for the dark mode implementation won't change that much. You can, of course, use different more or different colors for your implementation.

You don't have to revert the colors as we've done here, you could use different colors altogether.

If you've enjoyed this article, consider following me on Twitter(@chj_web).