var demo = document.getElementById("demo");
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    demo.classList.add('dark');
}
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  const newColorScheme = event.matches ? "dark" : "light";
  if (newColorScheme === "dark") {
    demo.classList.add('dark');
    demo.classList.remove('light');
  } else {
    demo.classList.add('light');
    demo.classList.remove('dark');
  }
});

.demo {
width: 100%;
height: 400px;
font-size: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100px;
height: 100vh;
}
p{
text-align: center;
}
.demo.dark{
background: black;
color: white;
}
.demo.light{
background: white;
color: black;
}