Как добавить темный режим на ваш сайт WordPress

Приветствуем вас! Многие устройства теперь имеют встроенную поддержку темного режима. Добавление темного режима на сайт автоматически адаптирует ваш дизайн к предпочтениям браузера ваших пользователей. Вы даже можете добавить на свой сайт переключатель темного. В этой статье мы покажем вам, как легко добавить темный режим на ваш сайт WordPress как в интерфейсе, так и в админке.

Что такое темный режим и зачем его добавлять на свой сайт?

Темный режим используется на мобильных устройствах и компьютерах для уменьшения количества белого света от экрана. Некоторые устройства имеют ночной режим, в котором вместо этого используются более теплые тона. Темный режим использует другой подход, добавляя темные цвета к фону.

Если у вас есть устройство iPhone или Android, вы можете переключиться в темный режим, просто используя переключатель. Кроме того, на своем компьютере вы можете просматривать веб-сайты в темном режиме с помощью расширения Chrome, например Night Eye.Темный режим уменьшает количество света, излучаемого экраном вашего компьютера.

Это не то же самое, что сделать фон вашего сайта черным. Этот режим полезен для пользователей в ночное время, поскольку яркий белый свет, излучаемый экраном вашего компьютера, может вызвать утомление глаз.

По этой причине темный режим часто называют ночным режимом. На большинстве веб-сайтов есть возможность включить или выключить темный режим в любое время. Добавление темного режима дает пользователям возможность включать и выключать темный режим во время просмотра вашего сайта.

Добавление темного режима на сайт WordPress

Устанавливаем и активируем плагин WP Dark Mode. После активации идем на страницу «Настройки»-WP Dark Mode в админке WordPress, далее переходим на вкладку «Общие настройки». Вы должны быть перенаправлены туда автоматически.

Здесь для вас включен параметр «Включить темный режим с учетом ОС». Это означает, что посетители автоматически увидят версию вашего сайта в темном режиме, когда на их устройстве установлен темный режим.

Также была включена настройка «Показать плавающий переключатель». Это означает, что пользователи могут переключить просмотр сайта в темный режим в любое время, даже если они не включили опцию темного режима на своем устройстве.

Идем на свой веб-сайт, вы должны увидеть переключатель в правом нижнем углу. Нажмите на него, чтобы мгновенно переключить ваш сайт в темный режим на вашем устройстве.

На странице «Настройки»-WP Dark Mode доступны дополнительные параметры настройки. Однако это довольно ограничено бесплатным плагином. Например, вам просто нужно щелкнуть вкладку Display Settings, чтобы изменить стиль плавающего переключателя.

Вы также можете настроить цвета темного режима на вкладке «Параметры стиля».

Не забудьте нажать кнопку «Сохранить настройки» после внесения любых изменений.

Примечание. В бесплатной версии WP Dark Mode вы получаете только первые 2 стиля плавающего переключателя и первые 2 предустановки цвета на выбор. Профессиональная версия WP Dark Mode предлагает гораздо больше вариантов дизайна, а также возможность включать темный режим в определенное время и возможность добавления собственного кода CSS.

Добавление темного режима в админку WordPress

WordPress поставляется с цветовыми схемами администратора, но ни одна из цветовых схем по умолчанию не уменьшает белый свет, исходящий от вашего экрана. К счастью, этот плагин также решает эту проблему.

Переходим на страницу «Настройки»-WP Dark Mode и щелкаем на вкладку «Общие настройки». Затем переводим переключатель «Enable Backend Darkmode» в положение «включено». Не забудьте нажать кнопку «Сохранить» настройки внизу страницы.

Теперь вы увидите новый переключатель в верхней панели вашей админки.

Просто нажмите на этот переключатель, чтобы мгновенно переключить админку в темный режим.

Совет: если на вашем сайте несколько администраторов, каждый может включать и выключать темный режим по своему усмотрению.

Поскольку «Темный режим» не является цветовой схемой администратора, вы можете легко использовать его вместе с существующей цветовой схемой администратора WordPress. Чтобы установить это, просто перейдите в «Пользователи»-«Профиль» и выберите опцию в разделе «Цветовая схема администратора».

Обратите внимание, что вам нужно будет отключить темный режим, чтобы увидеть параметры цветовой схемы администратора.

При написании сообщения в редакторе блоков WordPress вы также можете включить темный режим. Нажмите на маленький цветной значок в верхнем левом углу, затем выберите режим, который хотите использовать.