Переключение темного и светлого режимов с помощью HTML и CSS
15.02.2023 09:09
Сегодня я расскажу вам, как создать "Dark & Light Mode Switch With HTML & CSS".
Вот демо...
CodePen Embed - Переключатель режимов темнота-свет
Итак, приступим...
Сначала начнем с HTML
<body class="light">
<div class="switch-cont">
<input type="checkbox" id="switch" class="switch"/>
<label for"switch" class="slider">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
</label>
</div>
</body>Здесь я использую иконки "Font Awesome", чтобы они выглядели намного лучше, вы можете использовать любую другую библиотеку иконок или дополнить ее.
Давайте добавим некоторые стили, начнем с базового стиля тела.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #fff;
}Теперь добавьте некоторые стили для контейнера переключателя или switch-cont
.switch-cont {
position: relative;
display: inline-block;
width: 70px;
height: 40px;
}Скройте флажок ввода, нам нужен только его механизм
.switch-cont input {
width: 0;
height: 0;
}Добавьте несколько стилей слайдеру
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #28293d;
transition: 0.6s;
border-radius: 100px;
}
.slider:before {
position: absolute;
content: "";
height: 32px;
width: 32px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.6s;
border-radius: 100px;
z-index: 2;
}Увеличьте размер шрифта иконок, если вы используете иконки
.fa-moon {
position: absolute;
font-size: 22px;
top: 9px;
left: 4px;
color: #FEFCD7;
}
.fa-sun {
position: absolute;
font-size: 22px;
top: 9px;
right: 5px;
color: #FFCD02;
}Пора добавить немного жизни в код с помощью чекбокса и слайдера
input:checked + .slider {
background-color: #1c1c27;
}
input:checked + .slider:before {
transform: translateX(30px);
background: #57eba3;
}.dark {
background: #28293d;
transition: all 0.6s;
}
.light {
background: #fff;
transition: all 0.6s;
}Мы закончили с CSS, пришло время для JS. Очень простой и эффективный код
document.getElementById("switch").addEventListener("change", () => {
document.body.classList.toggle("dark")
document.body.classList.toggle("light")
})Итак, на сегодня достаточно, давайте встретимся с другой темой и другим кодом.
До свидания :)
Стоит ли изучать PHP в 2023-2024 годах?
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
Концепция локализации и ее применение в приложениях React ⚡️
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
Пользовательский скаляр GraphQL
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.