Почему разработчики так любят тёмную тему

Содержание

Как сделать темную тему с помощью сторонних ПО

Если установить «мрачный» оттенок экрана вышеописанным способом не удалось, можно прибегнуть к помощи сторонних приложений. Реализовать отсутствующую функцию способно множество приложений, доступных для скачивания в Google Play. Такой вариант считается универсальным и подходит для любой версии ОС Андроид. Подобный софт полностью бесплатный и по отзывам абонентов работает исправно на любых устройствах.


Программа Характеристика

Черная и серая тема 

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

Dark Ponder Theme 

Создана специально для любителей готики, и позволяет всего лишь изменить стиль рабочего стола. Чтобы тема работала корректно, после запуска приложения необходимо установить СМ Лаунчер. Программа изобилует рекламой, что является ее единственным недостатком. В остальном же нареканий по использованию данной темы нет.

Pure Black Launcher Theme

Довольно удобный софт, позволяющий изменить не только внешнее оформление дисплея, но и заменить официальный черный интерфейс. Достоинством является быстрота и плавность работы. Чтобы включить тему потребуется скачать МЕ Лаунчер. Загрузить его можно с сайта разработчика или из Google Play.

Почему белый цвет нагружает наши глаза

Так уж исторически сложилось, что на белой бумаге лучше различать чёрные чернила. Именно так — чёрным по белому. Эти два цвета лучше всего контрастируют. И нам легко и приятно читать газеты и книги. Большинство веб-сайтов в интернете (VK не исключение) и настольных программ переняли такую тенденцию. Их страницы также придерживаются этой структуры — слова написаны черным, фон — белый. Но монитор не бумага. В первую очередь — это источник света.

Контраст цветов

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

Если смотреть ночью на экран, который передаёт больше темных цветов, мы сможем значительно дольше находиться за ПК. Если вы по своей натуре «сова» и любите путешествовать в сети после захода солнца, то вам просто необходимо использовать в VKontakte чёрную тему.

Отдельная тема для мессенджера

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

Шапка в светлой теме стала белой, чтобы сфокусировать внимание на общении, а синий стал более ярким и насыщенным

Мессенджер сделан на базе модуля сообщений из основного приложения, а это значит, что он использует те же компоненты и ту же схему для описания всех цветов. К примеру, чтобы перекрасить шапку и поиск, потребовалось заменить значения соответствующих токенов: header_background, header_tint, header_text, search_bar_background, search_bar_field_background search_bar_field_tint и других.

Довольно простым способом мы смогли за короткое время перекрасить всё приложение, создав новую тему оформления.

Использование дополнительного софта

Несмотря на то что разработчики ВКонтакте не добавили в официальное приложение для Android-смартфонов «ночную» тему, сторонние производители приложений сделали это за них.

На сегодняшний день наиболее удобным способом установки черного интерфейса ВКонтакте является приложение «Kate Mobile для ВКонтакте». Чтобы правильно настроить темный цвет фона с помощью этой программы, выполните следующие действия:

зайдите в Play Маркет и найдите там бесплатное приложение «Kate Mobile для ВКонтакте» (ниже на скриншоте вы можете увидеть, как это выглядит в Play-Маркет);

  • нажмите «Установить», затем предоставьте этой программе все необходимые разрешения с помощью кнопки «Принять»;
  • после того, как загрузка закончится, откройте «Kate Mobile для ВКонтакте»;
  • войдите в свой аккаунт, используя логин и пароль (те же самые, которые вы используете для пользования ВКонтакте через официальное приложение или браузер);
  • для активации «ночной» темы нажмите на три точки в правом верхнем углу экрана, затем в выпадающем меню выберите пункт «Настройки»;
  • после этого перейдите в подраздел «Внешний вид»;
  • теперь вам будет доступно меню «Тема оформления», где на выбор предлагается несколько темных тем, например, «Индиго Темная», «Черная», «Темная Holo»;

Кроссплатформенность и VKUI

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

Кроме нативных приложений у нас есть VKUI. Это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших приложений. Мы используем VKUI, чтобы создавать тестовые продукты внутри VK, а также для экранов, которыми хотелось бы управлять с сервера без обновления приложения. Кроме того, эта библиотека используется для создания сервисов VK Apps сторонними разработчиками.

VKUI собран по тому же дизайну и с тем же набором компонентов, что и нативные приложения, поэтому применение схемы и поддержка тёмной темы не потребовала новых макетов. Для нас это как ещё одна платформа, которую мы поддерживаем, только она содержит переключение между iOS и Android.

Посмотреть реализацию дизайн-системы VK в виде React-компонентов можно на VKUI Styleguide. А самое интересное то, что на этой странице можно вживую увидеть используемые нами компоненты с возможностью переключать тему и платформу.

В ближайшее время мы займёмся обновлением документации VKUI и соберём больше информации о работе нашей дизайн-команды — будет много интересного ️

Скрытая настройка во всех Android-смартфонах позволяет включить темную тему оформления

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

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

Включить темную тему оформления во всех Android-смартфонах очень просто, причем для этого потребуется выполнить всего лишь несколько простых действий. Использовать такую цветовую гамму можно абсолютно на всех мобильных устройствах и планшетах, работающих под управлением операционной системы Android 5.0 Lollipop и новее. Компания Google отмечает, что это может привести к большому снижению скорости работы (в пределах 5%).

Для активации ночной темы следует запустить «Настройки», а затем перейти в раздел «Дополнительно», в котором следует выбрать пункт «Специальные возможности». В самом низу этого раздела следует активировать тумблер напротив «Инверсия цветов», в результате чего весь интерфейс операционной системы Android станет темным. Большая часть элементов будет выглядеть так, словно она заточена под такой вид отображения, однако есть и некоторые минусы.

Главный минус в том, что все иконки и изображения тоже будут отображаться с инверсией цветов, то есть они будут выглядеть крайне необычно для человеческого глаза. Впрочем, темную тему оформления на Android можно включать всякий раз, когда предполагается длительное использования мобильного устройств в вечернее и ночное время суток. Хочется верить, что в будущем Google добавит в операционную систему Android полноценный и нативный ночной режим, который позволит пользоваться смартфонами и планшетами с большим комфортом.

До 14 июля включительно у всех желающих есть возможность совершенно бесплатно получить смарт-браслет Xiaomi Mi Band 4, потратив на это всего 1 минуту своего личного времени.

Присоединяйтесь к нам в Twitter, Facebook, ВКонтакте, YouTube, Google+ и RSS чтобы быть в курсе последних новостей из мира технологий будущего.

Сохранение тем

Теперь всё работает, , но, если пользователь обновит страницу, его тема снова станет светлой. Чтобы это исправить, нам понадобится немного PHP. В самое начало страницы добавьте такой код:

PHP

Здесь запускается сессия, а потом проверяется существование элемента theme в супермассиве _SESSION. Если его нет, то он объявляется со значением light — это и есть сохранённая тема, которая хранится в браузере пользователя.

Изменим подключение стиля так, чтобы по умолчанию загружался сохранённый файл:

HTML + PHP

Теперь нужно сделать так, чтобы при смене темы отправлялся запрос другому php-файлу, который и будет менять $_SESSION. Начнём с самого файла, который назовём themes.php:

PHP

Этот файл получает запрос, а потом, если в запросе содержится параметр theme со значением light или dark, меняет сохранённый стиль.

Остаётся только дописать функцию, которая будет отправлять этот запрос, — ту самую Save ():

JavaScript

Теперь при обновлении страницы тема не будет меняться.

Установка тёмного фона Vanilla Dark в профиле ВК

Устанавливается расширение в ваш браузер, как и любое другое:

Кнопка «Менеджер» расширения открывает дополнительный редактор, где пользователи могут редактировать некоторые настройки текущего расширения. А также создавать свои.


Фон «Медуза» в Vanilla Dark

В любое время вы можете выключить чёрный стиль для ВК на своём компьютере. Для этого нужно поставить галочку в окне расширения на пункте «Выключить все стили». Кнопка «Инфо» переносит вас на страницу с описанием расширения в магазин.

Не все темы расширения работают корректно. Некоторые блоки могут не изменять цвет или даже менять его при наведении курсора. Это небольшая недоработка программистов, в которой они сами сознаются в своём блоге. Старайтесь выбирать стандартные тёмные темы для Vkontakte.

У вас есть возможность удалить расширение:

  1. Для этого нажмите кнопку меню в веб-навигаторе;
  2. Выберите «Дополнения» или «Расширения»;
  3. Откройте список установленных в браузере плагинов и найдите «Stylus». Нажмите возле него кнопку «Удалить».

С телефона

Подавляющее большинство пользователей «сидят» во ВКонтакте через мобильное приложение – тенденция к увеличению числа мобильных пользователей неустанно росла до 2018 года и продолжает расти по сей день. К сожалению, функционал официального приложения ВК для Андроида не позволяет менять тему оформления (на Айфоне это можно сделать в настройках). Однако существует несколько сторонних вариантов работы с ВК на Android (на Самсунге, LG, Xiaomi, Sony и любом другом девайсе) и на iOS. Рассмотрим их.

Kate Mobile

Kate Mobile – самый распространённый клиент ВК после официального приложения. KM является доверенным приложением, можете пользоваться им и не беспокоиться о конфиденциальности личной информации.

Чтобы сменить тему оформления В Контакте через Kate Mobile, пошагово выполняем следующую последовательность действий:

  1. Устанавливаем Kate Mobile через официальный магазин Google Play.
  1. Переходим в приложение и вводим данные для входа в аккаунт.
  1. Нажимаем на три точки, расположенные в правом верхнем углу.
  1. Открываем пункт «Настройки».
  1. Переходим в раздел «Внешний вид».
  1. Раскрываем вкладку «Тема оформления».
  1. Выбираем стиль оформления. Среди тёмных можно выделить «Тёмную Holo», «Индиго тёмную» и «Чёрную». Подберите ту, которая подходит вам больше всего, поскольку каждая из них предлагает определённые варианты оформления элементов приложения.
  1. Перезапускаем приложение и проверяем результат.

Как видно, всё очень просто – установить чёрный фон можно буквально в несколько действий.

Ночной ВК

Следующая утилита называется «Ночной ВК». Это относительно новый клиент ВКонтакте, располагающий расширенным функционалом по сравнению со стандартным приложением. Ночной ВК распространяется бесплатно. Этот клиент позволяет:

  • включать невидимку;
  • просматривать сообщения и оставлять их непрочитанными;
  • устанавливать тёмную тему;
  • работать сразу с несколькими аккаунтами.

Чтобы начать работу, нужно:

  1. Скачать приложение на смартфон и открыть его. Разработчик –
  1. Ввести данные для входа в свою страницу и разрешить приложению доступ к своей странице.
  1. Начать пользоваться клиентом. Ответ на вопрос о том, нужно ли настраивать тему, прост — никаких дополнительных действий по применению тёмной темы выполнять не нужно, она будет активирована автоматически.
  1. Чтобы подстроить ключевые параметры цвета и работы самого приложения, нужно перейти в «Настройки». Кнопка расположена в выдвигающейся слева панели.

Рассмотрим последний вариант, который подойдёт для тех, кто на смартфоне «сидит» в ВК через мобильную браузерную версию.

Orbitum

Orbitum – весьма распространённый браузер, который при помощи стандартных средств позволяет делать тему оформления ВКонтакте тёмной или любой другой по предпочтению пользователя.

Для изменения оформления ВКонтакте через Orbitum проводим следующий комплекс действий:

  1. Скачиваем и устанавливаем браузер из Google Play.
  1. Запускаем приложение и переходим в ВК – иконка социальной сети по умолчанию встроена в панель закладок.
  1. Нажимаем на иконку палитры в верхней панели инструментов.
  1. Выбираем тему из подкатегорий или через ТОП. Можно загружать и свои картинки. Наиболее тёмной является «Пиксель».
  1. Тапаем по подходящему стилю, оставляем галочку только напротив пункта «Страница ВКонтакте». Если оставить остальные галочки, то на рабочем столе появится заставка с выбранной темой.
  1. Переходим к сайту социальной сети. Светлые элементы будут несколько затемнены, что упростит работу с ВК.

Рассматривать варианты с затемнением экрана и включением инверсии цветов не будем – эти методы малоэффективны и неприменимы для постоянного использования.

Насколько эффективно работает темный режим

Многие недоверчивые пользователи гаджетов все еще задаются вопросом о эффективности темной темы. В виду этого, компания Google провела исследование с целью выяснения насколько ее приложения с темными режимами помогают сохранить заряд телефонов с OLED-экранами.

Эксперимент состоял в следующем: выбранный телефон Google Pixel 3 был установлен на яркость 200 нит (средний уровень яркости). Для отслежевания потреблении энергии в режиме реального времени было выбрана программа Basemark Power Assessment Tool, которое дает наиболее точный результат с точностью до миливат.

Исследование показало, что при переключении смартфона на темную тему, потребление заряда изменялось

Следует отметить, что во внимание брались такие задачи как: открытие телефонной книги, набор номера, просмотр последних вызовов, меню настроек, использование быстрого поиска Google и т.д. Эксперимент показал ошеломляющие результаты, ведь потребление энергии аккумулятора Pixel 3, при включенной темной теме, может быть снижено не только на 30%, но и, как в случаях с отдельными программами, на 50%!

Более того, при тестировании социальных сетей Facebook и Instagram экпериментаторами была включена инверсия цветов, так как данному приложению не свойственна темная тема. Применение инвертирования привело к увеличению автономной работы на 14,8%!

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

Пользователи с нормальным зрением

ErgonomicsApplied Ergonomics

Влияние полярного контраста на остроту зрения и корректуру текста

  • Задание на остроту зрения — определить местонахождение разрыва в кольцах Ландольта (Ландольт С оптотип). Другими словами, испытуемым демонстрировался символ, схожий с буквой С, повернутой под разными углами, и они должны были определить, с какой стороны находится разрыв, то есть определить верх и низ.
  • Задание на корректуру, где требовалось прочитать короткий текст и найти в нём разные виды ошибок.

между субъектами Результаты показали, что светлая тема выиграла по всем направлениям: разница в результатах теста на остроту зрения в тёмной и светлой теме у старших испытуемых была меньше, чем у молодыхHuman FactorsПростыми словами: чем мельче текст, тем проще пользователю читать его в светлой теме. никто из них не отметил никакой разницы в восприятии текста в тёмной и светлой темахпервое правило юзабилити: не слушайте пользователей.

Влияние полярного контраста на беглость чтения

при дневном освещении контраст не имел особого значения, но при ночном свете светлая тема дала лучшие результаты по сравнению с тёмной темой.Люди выполняли задания быстрее при дневном освещении (чем при ночном), в светлой теме (чем в тёмной теме), при более крупном шрифте в 4 мм (чем при мелком шрифте в 3 мм). При ночном освещении светлая тема показала себя значительно лучше, чем тёмная, и мелкий шрифт было гораздо легче прочесть в светлой теме. Короткие столбцы показывают лучшие результаты. Отметим, что время, замеренное в эксперименте, является временем показа (демонстрации). Хотя оно и включает в себя больше факторов, чем чистое время оценки, оно по большому счёту отражает время, необходимое участникам для считывания показанной строки.

VK-Helper.pro — расширение для создания черного фона в ВК

Плагин для браузеров VK-Helper позволит вам изменить стандартную тему ВКонтакте на чёрную или тёмную других оттенков. Для этого вам нужно установить расширение вручную. Перейдите на страницу загрузки https://vk-helper.pro/pages/download.html и выберите браузер, для которого нужно скачать помощник.

Дальнейший порядок действий:

Проверьте, установлена ли у вас последняя версия браузера

Это важно, иначе расширение может работать неправильно. Это можно сделать в разделе справки в пункте «О браузере»; Выбор браузера для установки расширения VK-Helper

Затем распакуйте архив с расширением и запомните папку, в котором оно находится; В своём браузере найдите режим разработчика и нажмите кнопку «Загрузить расширение»; Укажите расположение распакованного архива и подтвердите установку; После сделайте клик по значку на панели инструментов браузера и авторизуйтесь в ВКонтакте; Выберите настройки

Здесь доступен поиск нужных параметров. Введите в строке «Ночная тема» и поставьте галочку на этом пункте. Поиск настроек по VK-Helper

Это расширение позволяет применять некоторые настройки, недоступны в стандартной версии VK. Если этот вариант вам не подходит, попробуйте установить расширение Stylish для Firefox: https://addons.mozilla.org/ru/firefox/addon/stylish/. И для Google Chrome: https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ru. Для Opera и Яндекс.Браузера расширение почему-то удалено из магазина. Но, так как у них общий движок с Chrome, вы можете загрузить их с магазина для «Хром».

Как включить черную тему в ВК?

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

Как сделать ВК черным на ПК?

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

1. Расширение для Chrome — Dark theme for VK

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

  • установите плагин, перейдя ;

  • просто кликните на иконку в трее браузера в верхнем правом углу для переключения между стандартным и модернизированным видом;

Вот что в итоге получается, просто и со вкусом.

2. Расширение для Chrome — Dark Reader

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

  • установите плагин, перейдя по инструкции;

  • кликните на его иконку и начинаем настройки.

Вкл./Выкл. — отвечают за включение и выключение режима Dark.


Вкладка фильтр — позволяет настраивать яркость, контрастность и прочие характеристики, как для всех сайтов, так и для конкретных.

Вкладка список — позволяет задать перечень конкретных сайтов, к которым будет применяться Dark режим.

Вкладка еще — содержит настройки шрифтов и небольшие стандартные расширения для фильтра.

3. Расширение для Chrome, Opera, Firefox и Яндекс — Stylish

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

  • установите плагин, перейдя ;

  • теперь зайдите на сайт VK.COM и находясь на нем кликните по иконке Stylish в трее браузера, а затем на кнопку «Find styles for different sites»;

  • в каталоге выберите понравившеюся черную тему в ВК и поменяйте ее нажав на кнопку «Install Style»;

  • перед установкой вы можете кастомизировать ее, нажав соответствующую кнопку и поиграв с настройками, как вам угодно.

4. Официальный декстопный мессенджер для Вконтакте

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

  • нажмите правой кнопкой мыши на значок программы в трее в правом нижнем углу (может быть спрятан под стрелочкой) и перейдите в настройки;

  • в «Интерфейс» измените тему оформления на темную.

И так, мы разобрали самые популярные и главное безопасные методы, можно перейти к вопросу как сделать ВК черным на телефоне Андроид или IPhone.

Как ВК сделать черным цветом на телефоне?

В этом многообразии платформ мы разберем только две основных. Дело даже не в том

Как сделать ВК черным на Айфоне?

Тут все до нельзя просто, данная функция родная и настраивается за пару нажатий:

1. Заходим в настройки.

2. Выбираем пункт «Внешний вид».

3. Кликаем на «Темную».

Так легко включается черная тема ВК для iOS, но, к сожалению, аналогичной функции у гуглофонов пока нет, но в скором времени планируется и тогда настройка будет аналогична.

Как сделать черный ВК на Андроид?

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

1. Зайдите в настройки (нажмите на изображение трех точек в правом верхнем углу).

2. Перейдите в пункт «Внешний вид».

3. Выберите «Тему оформления» (очень много темных оттенков).

4. Перезагрузите приложение и наслаждайтесь.

Так вы сможете сделать черную тему в ВК на Андроид самым безопасным образом.

Как сделать фон ручным способом

Для тех, кто обладает хотя бы минимальными познаниями в особенностях работы браузера и различных сайтов, не составит труда поменять фон своими руками без установки сторонних программ. Для этого необходимо отредактировать файл CSS, отвечающий за оформление, с помощью обычного «Блокнота».

Для этого потребуется:

  • Найти или подготовить самостоятельно файл фона с расширением.css (можно выбрать любую картинку).
  • В настройках браузера необходимо добавить новый элемент («настройки для сайта»).
  • В категории «вид» выбрать нужный стиль.

Данные задачи решаются довольно легко и быстро. Гораздо сложнее ответить на вопрос о том, как сделать фон «В Контакте» на телефоне. Обычно пользователи используют специальные приложения, не предусматривающие такие возможности, а браузеры в мобильных операционных системах Android и iOS работают по другим принципам.

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

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

Теперь, в поисковой строчке напишите «Выключение света» , либо просто перейдите по этой ссылке

. Далее установите его в браузер, нажав на соответствующую кнопку, после чего переходите в сам ВК.

Долгосрочные эффекты

В изученной нами литературе рассматриваются одноразовые эффекты контрастной полярности на зрение человека. Но как насчет долгосрочных эффектов? Другими словами, имеет ли длительное воздействие контрастной полярности какое-либо влияние?

Интересное исследование, опубликованное в научных отчетах Nature Research в 2018 году, предполагает, что длительное воздействие светлой темы может быть связано с близорукостью. Близорукость (или миопия) означает неспособность ясно видеть объекты вдалеке и тесно связана с чтением и уровнем образования. В своем исследовании Андреа Алеман и ее коллеги из Тюбингенского университета в Германии попросили 7 человек прочитать текст, представленный в темной и светлой темах, по часу для каждой. Чтобы увидеть, изменилась ли их предрасположенность к близорукости после чтения, они измерили толщину сосудистой оболочки мембраны позади сетчатки. Истончение сосудистой оболочки связано с близорукостью.


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

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

Влияние контрастной полярности на остроту зрения и корректуру

Козима Пипенброк и ее коллеги из Института экспериментальной психологии в Дюссельдорфе, Германия, изучили две группы взрослых людей с нормальным (или откорректированным до нормального) зрением: молодые люди (от 18 до 33 лет) и пожилые люди (от 60 до 85 лет). Никто из участников не страдал какими-либо заболеваниями глаз (например, катаракта).

Участникам были даны два разных типа заданий:

  • Задача на корректуру (вычитку), включающая чтение короткого отрывка текста и выявление различных типов ошибок.

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

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

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

Другое исследование, опубликованное в журнале Human Factors той же исследовательской группой, рассматривало, как размер текста взаимодействует с контрастной полярностью в задачах на корректуру.

VK Helper

Сделать на ПК темную тему в ВК проще простого. Для этого необходимо выполнить следующие действия:

  1. В браузере переходим на страницу vk-helper.pro.
  2. Устанавливаем программу.
  3. Дополнительно переключаемся к приложению магазина.
  4. Оказавшись на странице VK Helper, нажимаем кнопку «Установить».
  5. Подтверждаем установку кнопкой «Установить расширение».
  6. Выбираем удобный язык.
  7. В правом верхнем углу нажимаем на значок контакта.
  8. Выбираем пункт «Добавить аккаунт».
  9. Вводим логин и пароль со своей страницы.
  10. Кликаем на значок контакта, выбираем пункт «Настройки».
  11. В открывшемся окне прописываем «ночная тема», ставим галку напротив нужного файла.

Читайте еще: Как определить, что на компьютере есть вирус?

Тема станет черной после обновления страницы. Если выполнять все по инструкции, трудностей не возникнет.

Работа с графикой

Весь набор иконок, используемый в приложениях, нарезан в белом цвете, и их можно легко перекрашивать, применяя токен из схемы.

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

На Android также есть 9-patch графика, которая используется, например, чтобы отрисовывать карточки с тенями. Тень в них чёрная, а заливка карточки белая. Чтобы не разбивать и здесь графику на два слоя, разработчики воспользовались режимом наложения цвета Multiply — таким образом чёрная тень не перекрашивается, и цвет применяется только на белом участке картинок, что нам и было необходимо.

Подбор цветов в тёмной теме

Мы начали примерять цвета тёмной темы на макетах главных экранов, чтобы определиться с основными используемыми оттенками. Для фона используем Gray 900 — цвет на один тон светлее чёрного, чтобы понизить контраст между фоном и текстом. Текст по этой же причине выбрали не белый, а Gray 100.

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

Таблица основных используемых цветов

В тёмной теме мы использовали меньшее количество цветов: синяя шапка и синие кнопки стали монохромными, спектр используемых серых оттенков сузился, а холодно-серая палитра перешла в обычный серый, сохранив контраст. Акцентные элементы остались синими — для тёмной темы был подобран более светлый и менее насыщенный оттенок.

Были и проблемные места, например модальные окна и карточки. Затемнение под ними не хотелось инвертировать в белый, и без дополнительных мер в тёмной теме обычный фон контента сливался бы с окружением. Чтобы этого избежать, для модальных карточек мы подобрали фон на тон светлее обычного, а также добавили обводку (пока только на Android), чтобы лучше отделять их от нижнего слоя.

Такие примеры показали, что нам нужна более гибкая система при реализации тёмной темы.

Техническая реализация

Подобрав на макетах соответствующие цвета для тёмной темы, мы стали переносить это дело в код.

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

Мы определились со следующим подходом, где токен — это уникальное название элемента или группы элементов (например, background_content), а его значением может быть только цвет из фиксированной палитры (например, White). Мы сделали схему в JSON-формате, внутри которой прописаны все токены с их значениями в каждой теме.

Такая схема очень похожа на CSS-файл с идентификаторами элементов и их стилями, но в формате JSON.

Как выглядит схема с токенами background_content и text_primary

Всё, что у нас получилось, доступно на GitHub:

  • палитра со всеми цветами и их уникальными названиями;
  • схема со всеми токенами и их значениями в светлой и тёмной темах.

Из JSON-схемы разработчики на всех платформах генерируют код в необходимом для себя формате. Об этом с примерами кода на iOS можно почитать на слайдах Антона Спивака с его выступления на CodeFest. Доклад о реализации на Android с выступления Арсения Васильева на AppConf можно посмотреть здесь.

Напомним, что мы решили сделать строгую систему, где можно указывать цвет только из внутренней палитры, то есть в значении токена нельзя прописать произвольный HEX-код цвета. К значению токена можно добавлять параметр alpha для указания дополнительной прозрачности цвета. Этот параметр мы планируем использовать для добавления отключённого состояния и состояния при касании у контролов, чтобы не добавлять в палитру те же цвета с другой прозрачностью.

На данный момент в схеме уже больше 150 токенов. Есть как глобальные переменные, так и полностью расписанные стили каждого контрола, а также уникальные случаи, которые не поддались бы более логичному объединению, например стили бабблов из сообщений.

Примеры часто используемых токенов

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

Когда темная тема экономит заряд

Как было описано выше, темная тема подходит больше к устройствам с OLED-дисплеями, о которых речь пойдет ниже.

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

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


С этим читают