С каждым днем все больше пользователей используют переключения темы ОС(операционной системы) в зависимости от настроек или времени суток. Учитывая то, что в вечернее время интерфейс браузера меняется на темный, а веб-сайт все в тех же светлых тонах – это смотрится ужасно и контент слишком выедает глаза пользователя.
Будучи крутым веб-разработчиком ты должен обеспечить приятный опыт использования продукта, например – добавив темную тему для тех, кто любит посерфить Интернет ночью. Изменить это можно без каких-либо проблем с помощью плагина DarkModeJS.
О плагине
DarkModeJS – плагин, который написан на чистом Javascript и не нуждается в подключении jQuery, который очень часто используют для плагинов. Весит всего лишь 2.39KB (1.05KB gzipped), что довольно мало. Есть возможность кастомизации, легкое внедрение в существующий проект, добавив лишь css-файл для темной темы.
Установка
Установить плагин можно невероятно просто: берем минифицированный js-файл из директории /dist
git-репозитория плагина и добавляем следующий код перед закрывающимся тэгом </body>
:
<script src="darkmode.js"></script>
<script>
var options = {
light: 'light.css',
dark: 'dark.css',
startAt: '23:00',
endAt: '06:00'
};
var DarkMode = new DarkMode(options);
</script>
Помимо этого, мы имеем возможность отделить светлую тему от темной, не подкачивая лишних стилей пользователю. Если Вы таки решили это сделать – то стоит добавить fallback для пользователей, у которых отключен Javascript:
<noscript>
<link rel="stylesheet" type="text/css" href="light.css">
</noscript>
Что внутри?
Плагин определяет время на стороне клиента и подкачивает нужный css-файл (если он указан в настройках), параллельно задавая класс на </body>
: dm-light
и dm-dark
для светлой и темной тем соответственно.
При переключении тем пользователю одноразово подкачивается, указанный в опциях, файл со стилями. То есть – мы имеем три варианта:
- Хранить стили для разных тем в одном css-файле, менять их в зависимости от класса
- Держать одну из тем в главном файле, вторую подкачивать при необходимости
- Разбить стили для каждой из тем в отдельный файл, сэкономив вес
Ссылки
Более подробную документацию и скачать плагин можно посмотреть на веб-странице или в GitHub репозитории.
Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!