Jak zrobić dark mode na stronie przez CSS?

Hej!

Dark mode to świetna funkcja UX i coraz częściej oczekiwana przez użytkowników. Da się to zrobić elegancko bez żadnych wtyczek.

CSS – zmienne kolorów

:root {
--bg: #ffffff;
--text: #333333;
}
body.dark-mode {
--bg: #1a1a2e;
--text: #e0e0e0;
}
body {
background-color: var(--bg);
color: var(--text);
transition: background-color 0.3s, color 0.3s;
}

JavaScript – toggle i localStorage

const toggle = document.getElementById('dark-toggle');
if (localStorage.getItem('darkMode') === 'true') {
document.body.classList.add('dark-mode');
}
toggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
localStorage.setItem('darkMode',
document.body.classList.contains('dark-mode'));
});

HTML – dodaj przycisk przez blok Własny HTML:
Tryb ciemny

Automatyczny dark mode według preferencji systemu

@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a2e;
--text: #e0e0e0;
}
}

Strona automatycznie dopasowuje się do ustawień systemu operacyjnego – bez żadnego przełącznika. 😊