CSS, prefers color scheme
Prefers colour scheme is detecting the dark or light mode on the user’s system.
no support for Internet Explorer and Firefox Android,
for more see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
#dark_mode, #light_mode{display:none;}
#dark_mode{color:white; }
@media (prefers-color-scheme: dark) {
body{background-color:black}
#dark_mode{display:block;}
}
@media (prefers-color-scheme: light) {
body{background-color:white}
#light_mode{display:block;}
}
</style>
<body>
<h1 id="dark_mode">DARK Mode ON !</h1>
<h1 id="light_mode">LIGHT Mode ON !</h1>
</body>
</html>