How to Make Dark Mode for Websites Using Only CSS

How to make a dark mode toggle in CSS which allows website visitors to view an eye-friendly design depending on their own system settings.

By Tim TrottHTML & CSS Tutorials • March 14, 2021
How to Make Dark Mode for Websites Using Only CSS

Several methods exist for adding dark or light modes to a website. These often involve a piece of Javascript to toggle a class on the body, which then triggers some alternative styling. Cookies are also used to maintain dark mode across page views.

When designing this site, I wanted a dark mode that did not use Javascript or Cookies, so I decided to use CSS3 Media Queries to achieve this result. Using media query for dark mode, the decision to load light or dark colours depends on the user's device settings. This site will load in dark mode if the user has dark mode enabled on their mobile or tablet. If light mode is enabled, this site will load in light colours. The only downside is that users cannot toggle between modes, but for me, that is OK.

What is Dark Mode?

Dark Mode Toggle Switch
How to Make Dark Mode for Websites Using Only CSS

Normal mode (or light mode) shows dark text on a white background and historically comes from paper and ink. In recent years, however, dark mode has become a popular alternative where light text is presented on a dark background.

The idea behind dark mode is that it reduces the light emitted by device screens while maintaining the minimum colour contrast ratios required for readability. This is often seen as being better for your eyes by reducing eye strain, to reduce blue light exposure and depending on the screen type, it can help reduce battery usage.

CSS Only Dark Mode Media Query

CSS3 Media Queries are a conditional set of instructions that are used to alter or add new CSS rules based on system settings. They are most commonly used to display different layouts and typography depending on the screen size - this is responsive web design.

CSS3 also has a media query for prefers-color-scheme, which can be used when the user's colour scheme matches the specified value.

In my case, the design of my site is for light mode by default; all styles in the CSS reflect this. I then add a media query for prefers-color-scheme: dark, which changes the background and text colours accordingly.

Let's have a look at how that works in practice.

css
body {
  background: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

  View Example on CodePen

You can also reverse the logic, specifying dark mode by default and adding a media query for prefers-color-scheme: light.

That's it. There is no adding or toggling extra classes; there are just a few colour overrides in a media query. It persists across pages and does not use Javascript or Cookies.

How to Change Dark Mode

Changing dark mode depends on the device you are using.

On Windows, click on the Start Menu and type "dark mode" and select from the list, or right-click the desktop and select Personalization then Colours from the left-hand menu. From this screen, you can set the colour mode (light, dark or custom).

On Apple macOS, from the Apple menu, select System Preferences, click General, then choose one of the Appearance options at the top of the window.

Android and iOS have shortcut icons in the status bar/notification bar, which turn on dark mode.

About the Author

Tim Trott is a senior software engineer with over 20 years of experience in designing, building, and maintaining software systems across a range of industries. Passionate about clean code, scalable architecture, and continuous learning, he specialises in creating robust solutions that solve real-world problems. He is currently based in Edinburgh, where he develops innovative software and collaborates with teams around the globe.

Related ArticlesThese articles may also be of interest to you

CommentsShare your thoughts in the comments below

My website and its content are free to use without the clutter of adverts, popups, marketing messages or anything else like that. If you enjoyed reading this article, or it helped you in some way, all I ask in return is you leave a comment below or share this page with your friends. Thank you.

There are no comments yet. Why not get the discussion started?

New comments for this post are currently closed.