👩‍💻 Создание анимированного переключателя темы (светлая/тёмная)

Создайте переключатель, позволяющий пользователю менять тему страницы между светлой и тёмной. При переключении должна происходить плавная анимация перехода. Реализуйте переключение тем с помощью CSS-переменных и JavaScript.

➡️ Пример: Переключатель переключает тему страницы между светлой и тёмной, изменяя цвета фона и текста. При смене темы фон плавно меняется за 0.3 секунды.

Решение задачи🔽

<div class="theme-toggle">
<label class="switch">
<input type="checkbox" id="theme-switcher">
<span class="slider"></span>
</label>
<p>Нажмите, чтобы переключить тему</p>
</div>

/* Переменные для тем */
:root {
--bg-color-light: #ffffff;
--bg-color-dark: #333333;
--text-color-light: #000000;
--text-color-dark: #ffffff;
--transition-duration: 0.3s;
}

/* Общие стили */
body {
background-color: var(--bg-color-light);
color: var(--text-color-light);
transition: background-color var(--transition-duration), color var(--transition-duration);
}

/* Тёмная тема */
body.dark-theme {
background-color: var(--bg-color-dark);
color: var(--text-color-dark);
}

/* Стили для переключателя */
.theme-toggle {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
}

.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 24px;
transition: background-color var(--transition-duration);
}

.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: transform var(--transition-duration);
}

input:checked + .slider {
background-color: #2196F3;
}

input:checked + .slider:before {
transform: translateX(26px);
}

document.getElementById('theme-switcher').addEventListener('change', (event) => {
document.body.classList.toggle('dark-theme', event.target.checked);
});