Как сделать переключатель тёмной темы
Короткий ответ
Опишите цвета CSS-переменными, переопределите их для класса dark и переключайте класс кнопкой:
<style>
:root { --bg: #ffffff; --text: #222222; }
:root.dark { --bg: #1e1e1e; --text: #eeeeee; }
body { background: var(--bg); color: var(--text); }
</style>
<button id="theme">Toggle theme</button>
<script>
document.getElementById('theme').addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
</script>Запомнить выбор
Сохраните тему в localStorage и восстановите её при загрузке страницы:
const root = document.documentElement;
if (localStorage.getItem('theme') === 'dark') root.classList.add('dark');
button.addEventListener('click', () => {
const isDark = root.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});Системная настройка
Если пользователь ещё не выбирал, следуйте настройке его системы:
const saved = localStorage.getItem('theme');
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.toggle('dark', saved ? saved === 'dark' : systemDark);Частая ошибка
Если тема применяется в конце страницы, сначала мелькает светлый вариант. Разместите скрипт, который ставит класс, в head, до отображения стилей.
<head>
<script>
if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark');
</script>
</head>