CSS variables + klasa .dark

Najczyściej robi się to tak, że definiujesz kolory w :root, a dla trybu ciemnego nadpisujesz je w body.dark. Wtedy cała strona zmienia się jednym kliknięciem.

:root {
  --bg: #ffffff;
  --text: #000000;
}

body.dark {
  --bg: #000000;
  --text: #ffffff;
}

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

Wersja bazowa

:root {
  --bg: #ffffff;
  --text: #000000;
  --card: #ffffff;
  --line: #dddddd;
}

body.dark {
  --bg: #0f1115;
  --text: #eef2f7;
  --card: #171a21;
  --line: #2d3442;
}

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

.card {
  background: var(--card);
  border: 1px solid var(--line);
}

JavaScript

const btn = document.getElementById('themeToggle');

btn.addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

Tyle wystarczy, żeby przełączać motyw. U mnie na górze tej strony to właśnie działa.

prefers-color-scheme

Możesz też sprawdzać, czy użytkownik ma w systemie ustawiony ciemny motyw i automatycznie go włączyć.

@media (prefers-color-scheme: dark) {
  body {
    
    
  }
}

filter: invert(1)

html {
  filter: invert(1);
}

Technicznie działa, ale odwraca też zdjęcia, logo i inne grafiki. Dlatego zwykle się tego nie używa.