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>