The mini Dark Mode

a very, very basic Dark Mode Example with OS-Color-Mode detection

by hennson

HTML

<h1>
  Hallo Welt! 👋
</h1>
<button class="mode-toggle">Schema wechseln</button>

CSS

:root,
body.light {
  --background-color: #fff;
  --text-color: #333;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

body.dark {
  --background-color: #333;
  --text-color: #fff;
}

@media (prefers-color-scheme: dark) {
  body {
    --background-color: #333;
    --text-color: #fff;
  }
  .mode-toggle {
    display: none;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

JavaScript

const btn = document.querySelector('.mode-toggle');

// Listen for a click on the button
btn.addEventListener('click', function() {
  // Then toggle (add/remove) the .dark-theme class to the body
  document.body.classList.toggle('dark');  
})