Как сделать тёмную тему для сайта / Skillbox Media
Рассказываем, как добавить на сайт тёмную тему и выбрать для неё цвета, комфортные для глаз.
Содержание:
Бесплатный курс: «Быстрый старт в Python»
Узнать большеКуда ни плюнь, везде появляются тёмные темы: в операционных системах, социальных сетях, видеохостингах и даже на обычных сайтах. Если вы разрабатываете что-то из этого, то вам будет полезно знать, как создаётся тёмная тема, потому что рано или поздно вас попросят её сделать.
Рассказываем, как выбирать цвета, которые не будут сильно контрастировать, как сменить тему и сделать так, чтобы она не сбрасывалась при обновлении страницы.
Цвета, от которых не будет больно
Правильно подобранные цвета делают сайт красивым: он приятно смотрится и не вызывает боль. Я не дизайнер, поэтому расскажу только об одном аспекте — контрасте.
Выбранные цвета не должны сильно контрастировать друг с другом. Яркий пример — чёрный текст на белом фоне. Между этими цветами целая пропасть, поэтому после долгого чтения у пользователя начнут болеть глаза.
Использовать настолько контрастные цвета рекомендуется только тогда, когда вы добавляете отдельную тему для людей с плохим зрением. В остальных случаях лучше сделать фон сероватым, например, #f4f4f4, а шрифт — угольным (#373737) или почти чёрным (#111111).
В светлых темах более яркие цвета используют для фона, а тёмные — для текста и различных элементов страницы. Например, основной фон может быть светлым, а текст, хедер, футер, кнопки и другие объекты — тёмными. Всё наоборот в тёмных темах: в них фон делают как можно менее ярким, а всё остальное чуть менее тёмное.
Посмотрите, как делают темы в других приложениях, — возможно, найдёте что-то, что захотите сами использовать.
Определившись с палитрой, можно начинать работать над сайтом.
Создание сайта
Для начала создадим страницу, для которой сделаем несколько тем:
Простая страница, на которой есть хедер и небольшой текст. Из особенностей можно выделить подключение двух файлов стилей: main.css и light.css. В первом будут указаны основные стили страницы, а во втором — цвета для светлой темы.
Также у второго тега есть идентификатор, который понадобится для работы скрипта — в нём будет меняться путь к файлу. Когда путь изменится, браузер автоматически загрузит и применит стили из другого файла.
Поэтому мы можем поместить основные стили в main.css, но не указывать там никаких цветов. Либо указать их в нейтральных оттенках, чтобы пользователь видел более плавное переключение между темами, а не белый фон с чёрным текстом:
Вот как это выглядит:
Создание светлой темы
В файле light.css указываем цвета для всех элементов:
Вот что получится:
Тут всё выполнено в светлых тонах, кроме кнопки смены темы. В тёмной теме будут те же элементы, но противоположные по тону.
Создание тёмной темы
Теперь нужно создать файл dark.css и сразу указать цвета для тёмной темы, чтобы потом сосредоточиться на реализации смены и сохранения тем:
Вот как это выглядит:
Переключение тем
Для смены тем мы напишем функцию ChangeTheme (), которая будет вызываться при нажатии на одноимённую кнопку. Функция будет проверять, какой стиль подключён, а потом менять его на противоположный:
В конце вызывается функция Save (), которая будет сохранять тему. Пока можно оставить её пустой и проверить, правильно ли работает скрипт:
Сохранение тем
Теперь всё работает, но если пользователь обновит страницу, то его тема снова станет светлой. Чтобы это исправить, нам понадобится немного PHP. В самое начало страницы добавьте такой код:
Здесь запускается сессия, а потом проверяется существование элемента theme в супермассиве _SESSION. Если его нет, то он объявляется со значением light — это и есть сохранённая тема, которая хранится в браузере пользователя.
Изменим подключение стиля так, чтобы по умолчанию загружался сохранённый файл:
Теперь нужно сделать так, чтобы при смене темы отправлялся запрос другому php-файлу, который и будет менять $_SESSION[«theme»]. Начнём с самого файла, который назовём themes.php:
Этот файл получает запрос, а потом, если в запросе содержится параметр theme со значением light или dark, меняет сохранённый стиль.
Остаётся только дописать функцию, которая будет отправлять этот запрос, — ту самую Save ():
Теперь при обновлении страницы тема не будет меняться.
Для всего этого можно было использовать и JS-cookies, но тогда сначала бы подгружались стили по умолчанию, затем скрипт и только потом уже та тема, которую сохранил пользователь. Поэтому лучше сразу использовать PHP, потому что он меняет тему вместе с загрузкой страницы.
