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>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		/* 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;
			}
		}
	</style>
</head>
<body>
	<h1>Lorem</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, libero.</p>
</body>
</html>

Coding Video

https://youtu.be/W6mvCL2vCC8