Переключатель темных и светлых тем + канал YT

В этой статье я расскажу вам, как создать тумблер темных и светлых тем с помощью чистого HTML, CSS и JavaScript.

Сначала создайте три файла: index.html, style.css и script.js.

Теперь вставьте этот HTML-код в файл index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark & Light Theme Toggler</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <input type="checkbox" class="checkbox" id="inp">
        <label class="label" for="inp">
            <div class="ball"></div>
        </label>
    </div>
</body>
<script src="script.js"></script>
</html>

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Теперь пришло время для стилизации и всего остального, поэтому давайте напишем CSS, теперь вставьте этот код в файл style.css

* {
    box-sizing: border-box;
}

body {
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    transition: background 0.2s linear;
}

body.dark {
    background-color: #292C35;
}

.checkbox {
    opacity: 0;
    position: absolute;
}

.label {
    background-color: #111;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px;
    position: relative;
    height: 26px;
    width: 50px;
    transform: scale(1.5);
}

.label .ball {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 22px;
    width: 22px;
    transform: translateX(0px);
    transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
    transform: translateX(24px);
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь запрограммируем логику для кнопки Toggler, вставьте этот код javascript в script.js

const inp = document.getElementById('inp');

inp.addEventListener('change', () => {
    document.body.classList.toggle('dark')
})

Войти в полноэкранный режим Выйти из полноэкранного режима

Вот и все, нажмите на шарик, чтобы увидеть волшебство.

Это обучающее видео уже есть на моем канале — https://www.youtube.com/shorts/Lfetzzs6Bqo (Fantastic Frontend).
Подписывайтесь на канал и ставьте лайк на видео, чтобы получать больше интересного контента.
Также не забывайте следить за мной на dev.to

Сделано с помощью 💗 by Arjun