Dark theme in Pure CSS

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>

The CSS

Custom properties

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

The container

.container{
  width: 300px;
  margin: auto;
  padding: 1rem;
  
  background: var(--background);
  color: var(--color);
}

The 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.

@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.