CSS Dark / Light является интересным и полезным функционалом для сайта, ориентированного на чтение, например, блога или форума. Способов его реализации достаточно много, но мы используем самый простой и универсальный.
Admin
Большинство сайтов всегда создается в традиционной светлой теме: используется принцип “черный текст на белом фоне”. В общем и целом это универсальное решение для наиболее типовых ситуаций, когда мы читаем материал сайта при нормальном или искусственном освещении. Правда иногда приходится иметь дело с “авторскими” проектами, где используется так называемая выворотка, т. е. белый текст на темном фоне. Если этот прием используется для небольших информационных блоков, то сложностей в восприятии он не вызывает. Но если вам необходимо ознакомиться с большим объемом текста, то выворотка не всегда может показаться лучшим выбором. Впрочем, есть исключения.
Прежде всего, не будем забывать о братьях наших меньших – смартфонах или планшетах. Если ваше устройство оснащено экраном, изготовленным с помощью технологий AMOLED или OLED, то темный или черный фон позволит заметно сэкономить на энергопотреблении.
Второй момент – это чтение текста в условиях недостаточного освещения. Сегодня это довольно частое явление, и если вы пользуетесь смартфоном в темное время суток, яркий белый экран приведет к быстрому переутомлению: читать долго вы просто не сможете.
И третье: кому-то в силу привычек или субъективных предпочтений может просто нравиться читать светлый текст на темном фоне.
Почему не закрыть все эти три проблемы одним простым решением, позволив посетителю вашего сайта самому выбрать цветовую схему представления текстуальной части или всего вашего сайта? Сделать это можно, используя CSS для стилизации, а JavaScript – для переключения между режимами и фиксирования выбранного.
Прежде всего, определимся с основным алгоритмом. Самым очевидным будет использование элемента DOM body и назначение / удаление у него класса .dark-mode. Можно использовать и id, который адресуется быстрее, но синтаксис для классов будет компактнее.
Создадим файлы schemes.css и schemes.js и подключим их к взятому для примера index.html со стандартной разметкой:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dark / Light with CSS / JavaScript</title>
</head>
<body>
<h1 style="text-align: center;">Sample Demo</h1>
<p style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<link rel="stylesheet" href="schemes.css" type="text/css" />
<script type="text/javascript" src="schemes.js"></script>
</body>
</html>
Дальше работать мы будем только со стилями и ванильным JavaScript, так что сторонняя библиотека, например jQuery, нам не понадобится.
Понятно, что работать мы будем с селекторами по следующему принципу:
body { color: #000; background: #fff; }
/* ... */
body.dark_scheme { color: #fff; background: #000; }
/* ... */
Но, чтобы не запутаться в HEX / RGB(A) цветовых кодах, мы сразу будем использовать CSS-переменные. Примерно так:
:root {
--back-light: #fff;
--text-light: #000;
--back-dark: #222;
--text-dark: #eee;
}
body { color: var(--text-light); background: var(--back-light); }
/* ... */
body.dark_scheme { color: var(--text-dark); background: var(--back-dark); }
/* ... */
Обратите внимание на то, что я намеренно изменил цвета для темной темы – чтобы было понятно для чего мы используем переменные.
Для наглядности стилей у нас более чем достаточно. Теперь очередь за скриптовой магией.
Прежде всего, определим в нашем JS-файле два элемента, с которыми мы будем работать. Это родитель body и переключатель тем a#toggle_scheme:
const boddy = document.body;
const toggler = document.getElementById('toggle_scheme');
В исходном состоянии оба наших элемента не будут иметь класса. При нажатии на переключатель должны произойти три события:
.dark_scheme_on – вдруг вы захотите стилизовать его особым образом,.dark_scheme,Соответственно, при повторном нажатии на переключатель указанные классы у обоих элементов будут удалены – спасибо методу classList.toggle. А вот тема снова должна быть зафиксирована.
Для хранения выбранной темы мы будем использовать Local Storage. В отличие от Cookies, данные в Local Storage хранятся неограниченное время, и манипулировать ими немного проще. Если Вам больше подходят Cookies, переписать код будет несложно.
Для полноты картины можно также добавить проверку на доступность Local Storage. Мы же для наглядности обойдемся без них:
toggler.onclick = function(e) {
e.preventDefault();
this.classList.toggle('dark_scheme_on');
let darkSchemeEnabled = boddy.classList.toggle('dark_scheme');
localStorage.setItem('darkScheme', darkSchemeEnabled ? 'on' : 'off');
};
Обратите внимание на то, что для записи значения темы (on или off) используется результат применения метода classList.toggle. Если он добавит класс, то вернет true, и в Local Storage будет записано значение on (т. е. темная тема включена). В противном случае – off (темная тема выключена).
Нам осталось последнее – проверка состояния режима темной темы. Для этого будем использовать событие DOMContentLoaded:
document.addEventListener('DOMContentLoaded', (event) => {
if (localStorage.getItem('darkScheme') === 'on') {
boddy.classList.add('dark_scheme');
}
});
Соберем всю нашу историю вместе:
const boddy = document.body;
const toggler = document.getElementById('toggle_scheme');
document.addEventListener('DOMContentLoaded', (event) => {
if (localStorage.getItem('darkScheme') === 'on') {
boddy.classList.add('dark_scheme');
}
});
toggler.onclick = function(e) {
e.preventDefault();
this.classList.toggle('dark_scheme_on');
let darkSchemeEnabled = boddy.classList.toggle('dark_scheme');
localStorage.setItem('darkScheme', darkSchemeEnabled ? 'on' : 'off');
};
Использование темной и светлой темы определенно улучшит внутренние поведенческие факторы и будет способствовать увеличению таких важных показателей, как время пребывания на сайте, вовлеченность и положительный опыт. Особенно если речь идет о проекте, на котором размещена текстовая информация, ориентированная на длительное чтение.
И последнее: реализация темной и светлой темы требует тщательной проработки и тестирования. Обратите внимание на контрастность и читабельность текста в обоих режимах, и тогда результат окупит все ваши усилия.
© 2008 - 2024 Webmasters.BY Все права защищены
Новый комментарий