How to create a Dark Mode for your website using CSS

Learn how to create a Dark Mode for your website using CSS in this quick and easy tutorial.

Most modern operating systems allow the user to enable Dark Mode, indicating that the user prefers to view content on darker backgrounds.

If your website uses a white or light-colored background by default, it is a good idea to have it automatically switch over to a darker background if the user has Dark Mode enabled.

How to add Dark Mode to your website using CSS

Let’s say you already have some CSS that works nicely in normal (light) mode:

body {
	background-color: rgba(255, 255, 255, 1);
	color: rgba(88, 88, 88, 1);
}

Use @media in combination with prefers-color-scheme to specify the CSS properties that you’d like to take effect in dark mode:

body {
	background-color: rgba(255, 255, 255, 1);
	color: rgba(88, 88, 88, 1);
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: rgba(28, 28, 28, 1);
		color: rgba(248, 248, 248, 1);
	}
}

The replacement CSS properties will take effect if the website visitor has Dark Mode enabled on their device.