С каждым днем все больше пользователей используют переключения темы ОС(операционной системы) в зависимости от настроек или времени суток. Учитывая то, что в вечернее время интерфейс браузера меняется на темный, а веб-сайт все в тех же светлых тонах – это смотрится ужасно и контент слишком выедает глаза пользователя.

Будучи крутым веб-разработчиком ты должен обеспечить приятный опыт использования продукта, например – добавив темную тему для тех, кто любит посерфить Интернет ночью. Изменить это можно без каких-либо проблем с помощью плагина DarkModeJS.

О плагине

DarkModeJS – плагин, который написан на чистом Javascript и не нуждается в подключении jQuery, который очень часто используют для плагинов. Весит всего лишь 2.4kb, что довольно мало. Есть возможность кастомизации, легкое внедрение в существующий проект, добавив лишь 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 для светлой и темной тем соответственно.

При переключении тем пользователю одноразово подкачивается, указанный в опциях, файл со стилями. То есть – мы имеем три варианта:

1. Хранить стили для разных тем в одном css-файле, менять их в зависимости от класса
2. Держать одну из тем в главном файле, вторую подкачивать при необходимости
3. Разбить стили для каждой из тем в отдельный файл, сэкономив вес

Ссылки

Более подробную документацию и скачать плагин можно посмотреть на веб-странице или в GitHub репозитории.

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!