Не так давно в IT-пространстве появилась тенденция в создании темной темы для своих платформ. Это коснулось практически всего — от приложений до операционных систем. И всё это движение перетекло на сайты.
Это не то что мода, а скорее практичный способ улучшить контакт с ресурсом в темное время суток. Поскольку темная тема для сайта не так сильно будет давить на глаза, в отличие от белого.
Что такое темная тема?
Темный режим (темный внешний вид) – это популярная концепция в современном дизайне, массово применяемая в разработках приложений, программ, ОС.
В большинстве случаев это является переключателям в виде кнопки, при нажатии на которую происходит переключение со светлой темы на темную.
Для создании темной темы для сайта лучше всего использовать псевдокласс :root и переменные CSS. С помощью их намного проще манипулировать со цветом сайта.
Темная тема для сайтов с помощью JS-плагинов
Я сделал небольшую подборку моделей, которые помогут реализовать переключатель темной темы. И главное, при использовании этих расширении, выбранная тема на сайте будет сохраняться даже при переходе на другие страницы сайта. То есть будет запоминаться выбор темы пользователем до того момента, пока он сам не переключится между темами.
Dark mode switch
Очень легкий и простой переключатель темной темы на светлую. Стили для темной темы создаются через свой параметр [data-theme="dark"]. Смотрите пример.
Подключение:
<link rel="stylesheet" href="dark-mode.css"> <script src="dark-mode-switch.min.js"></script>
HTML-переключатель:
<div class="form-check form-switch"> <input type="checkbox" class="form-check-input" id="darkSwitch"> <label class="custom-control-label" for="darkSwitch">Dark Mode</label> </div>
Переопределение стилей:
[data-theme="dark"] .content {
background-color: #333333 !important;
}
[data-theme="dark"] body {
background-color: #111111 !important;
}
Dark mode toggle local storage
Это модуль работает с jQuery. Он создает переключатель класса к тегу body. При переключении на темную тему — к body добавляется класс dark. Это расширение использует API локального хранилища для сохранения выбранной темы сайта.
Подключение:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// Dark Mode Setup
var darkMode;
if (localStorage.getItem('dark-mode')) {
// if dark mode is in storage, set variable with that value
darkMode = localStorage.getItem('dark-mode');
} else {
// if dark mode is not in storage, set variable to 'light'
darkMode = 'light';
}
// set new localStorage value
localStorage.setItem('dark-mode', darkMode);
if (localStorage.getItem('dark-mode') == 'dark') {
// if the above is 'dark' then apply .dark to the body
$('body').addClass('dark');
// hide the 'dark' button
$('.dark-button').hide();
// show the 'light' button
$('.light-button').show();
}
// Toggle dark UI
$('.dark-button').on('click', function() {
$('.dark-button').hide();
$('.light-button').show();
$('body').addClass('dark');
// set stored value to 'dark'
localStorage.setItem('dark-mode', 'dark');
});
$('.light-button').on('click', function() {
$('.light-button').hide();
$('.dark-button').show();
$('body').removeClass('dark');
// set stored value to 'light'
localStorage.setItem('dark-mode', 'light');
});
</script>
HTML-переключатель:
<div class="switch_dark_bt">
<ul>
<li>
<button class="dark-button">Dark</button>
</li>
<li>
<button class="light-button" hidden="hidden">Light</button>
</li>
</ul>
</div>
Стили прописываются через класс .dark:
body.dark {
background: #333333;
color: #666666;
}
Darkmode.js master
Этот плагин интересен тем, что он, по сути, изменяет цвет автоматически: подключили скрипт и работа завершена. Дело в том, что он использует смешанный режим CSS mix-blend-mode: difference;
Подключение:
<script src="https://unpkg.com/darkmode-js@1.3.4/lib/darkmode-js.js"></script>
<script>
new Darkmode({
bottom: '32px',
right: '32px',
time: '0.5s',
label: '🌓',
backgroundColor: '#eaf0f2', // default: '#fff'
buttonColorDark: '#333',
// save the dark mode in cookies
saveInCookies: true
}).showWidget();
</script>
Переопределение стилей:
Стили в темной теме можно редактировать через класс darkmode--activated, который добавляется к body. Что игнорировать режим смешивания для определенных элементов на сайте, используйте класс darkmode-ignore.
.darkmode--activated p, .darkmode--activated li {
color: #000;
}
/* Игнор смешанного режима через HTML */
<div class="darkmode-ignore">Содержимое<div>
/* Игнор смешанного режима через css */
.button {
isolation: isolate;
}