Все что нужно для переключения темы:
Инициализация при загрузке, максимально короткий скрипт. При желании можно добавить проверку на пользовательские предпочтения prefer-color-theme
<head>
<script>
const theme = localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-theme', theme);
</script>
Код переключателя
document.querySelectorAll('.theme-toggle').forEach(el => {
el.addEventListener('click', () => {
const theme = document.documentElement.getAttribute('data-color-theme') === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-color-theme', theme);
localStorage.setItem('color-theme', theme);
});
});
И стили
:root {
--body-bg: white;
}
[data-color-theme="dark"] {
-body-bg: black;
}
Разумеется, вместо атрибута можно вешать класс
document.documentElement.classList.add('dark-theme');
:root {
--body-bg: white;
}
html.dark-theme {
-body-bg: black;
}
