ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Смена светлого фона на темную тему сайта

Смена светлого фона на темную тему сайта

Интересное решение на JavaScript, как переключение светлого фона сайта на темную, а также можно задействовать наоборот с переключением кнопок. Теперь вы можете на сайте создать функцию для пользователя, который может переключить фон на совершенно другой цвет, а больше всего на противоположный, как день и ночь. Ведь здесь идет кнопка, что добавляется и с последствием запоминает к тегу body под класс asogledasu, который отвечает за функционал переключение по всему сайту.

Вероятно сам смысл понятен, что мы выставляем данным скриптом функцию переключение под темную гамму цвета, ведь по умолчанию установлен светлый, и на кнопке видно изображение виде солнца. Но только стоит ее перевести по клику, то появится темный фон со светлой луной в центре данной кнопки. Что по оформлению, то здесь самостоятельно можно стилистикой вывести данные, как поменять оттенок или сделать более меньше кнопку переключателя.

Светлый фон:

Как сделать тёмную тему для сайта

Темный фон:

Как добавить темную тему на свой сайт

Приступаем к установке:

HTML

Код

CSS

Код

body.designale {
  background: #141414;
}
.designale .lsanukad h3 {
  color: #ede9e9;
  background: #28679d;
  border: 1px solid #181717;
}

.kemenau-videniu {
  width: 70px;
  height: 44px;
  position: relative;
  display: inline-block;
  border: 5px solid #337AB7;
  border-radius: 50px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.kemenau-videniu input {
  display: none;
}
.kemenau-videniu .asogledasu {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  position: absolute;
  transition: 0.5s;
  background: #fff;
  border-radius: 50px;
}
.kemenau-videniu .asogledasu:before {
  top: 0;
  bottom: 0;
  width: 28px;
  left: 2px;
  content: "";
  height: 30px;
  margin: auto 0;
  position: absolute;
  transition: 0.5s;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23ffba0d' d='M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
}
.kemenau-videniu input:checked + .asogledasu {
  background: #121212;
}
.kemenau-videniu input:checked + .asogledasu:before {
  -webkit-transform: translateX(24px);
  transform: translateX(24px);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23FFFFFF' d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
}

Код

Сама функция большинству знакома, но суть здесь, что она работает на JavaScript, где нам не нужно прописывать библиотеку, а также самому выводить размеры и выставлять нужный оттенок при замене.

Демонстрация
Источник: atuin.ru

03 Июня 2022 Загрузок: 4 Просмотров: 829 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0