CSS for Dark Mode & Theming

Leverage prefers-color-scheme and CSS variables to create automatic dark‑mode themes.

:root {
  --bg:#fff; --text:#111; --primary:#0066cc;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#111; --text:#eee; --primary:#4a90e2; }
}
body { background:var(--bg); color:var(--text); }

---

Example: Manual toggle with JavaScript

document.getElementById('themeBtn').addEventListener('click',()=>{
  document.documentElement.dataset.theme =
    document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
});

[data-theme="dark"] { --bg:#111; --text:#eee; }