Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Переключатель между темным и светлым режимом на сайте
Дата добавления: 04.07.2019 - 09:03
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 33
Количество комментариев: 0
Размер файла: 5.6 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Плагин JavaScript использует компонент переключателей Bootstrap для создания кнопки переключения, которая позволяет пользователю переключаться между темным и светлым режимами на вашей веб-странице.
Плагин использует локальное хранилище HTML5 для сохранения текущего режима, выбранного пользователем.
1. Загрузите таблицу стилей dark-mode.css и JavaScript dark-mode.js в свой проект.
2. Создайте переключатель для переключения между темным и светлым режимами.
3. Переопределите стили CSS по умолчанию при запуске веб-страницы в темном режиме.
Плагин использует локальное хранилище HTML5 для сохранения текущего режима, выбранного пользователем.
Как использовать:
1. Загрузите таблицу стилей dark-mode.css и JavaScript dark-mode.js в свой проект.
Код
<link rel="stylesheet" href="dark-mode.css">
<script src="dark-mode-switch.min.js"></script>
<script src="dark-mode-switch.min.js"></script>
2. Создайте переключатель для переключения между темным и светлым режимами.
Код
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="darkSwitch">
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<input type="checkbox" class="custom-control-input" id="darkSwitch">
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
3. Переопределите стили CSS по умолчанию при запуске веб-страницы в темном режиме.
Код
[data-theme="dark"] {
background-color: #111 !important;
color: #eee;
}
[data-theme="dark"] .bg-light {
background-color: #333 !important;
}
[data-theme="dark"] .bg-white {
background-color: #000 !important;
}
[data-theme="dark"] .bg-black {
background-color: #eee !important;
}
background-color: #111 !important;
color: #eee;
}
[data-theme="dark"] .bg-light {
background-color: #333 !important;
}
[data-theme="dark"] .bg-white {
background-color: #000 !important;
}
[data-theme="dark"] .bg-black {
background-color: #eee !important;
}
Поделись с друзьями:
