Using CSS @media Query to Detect Dark Mode Theme

This article shows how easy it is to detect if a user is requesting a dark theme. This requires CSS.

As of this writing, Chrome, Safari and Firefox support this media query; Edge (Windows 10 1909) and IE11 do not.

<!DOCTYPE html>
	<meta charset="utf-8" />
		/* default formatting to light mode */
		body {
			background-color: #eee;
			color: #222;
		/* use media query to detect if dark mode is in use */
		@media (prefers-color-scheme: dark) {
			body {
				background-color: #000;
				color: #eee;
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, libero.</p>

Coding Video

Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site.