Черный фон в ВК: темная тема для ПК и телефона — как сделать

Разработчики социальной сети «ВКонтакте» не перестают удивлять. Они постоянно работают над оформлением интерфейса, разрабатывают новинки и с успехом применяют их на практике. Многие пользователи сети интересуются, как на ПК сделать темную тему в ВК. Разговоры на этот счет не утихают. Нашлись поклонники этой идеи, и те, которым она пришлась не по душе.

Обратите внимание

!

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

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

Черная, темная тема ВК Андроид: как включить на телефоне

Для того, чтобы на Андроид телефоне включить темную тему с черным фоном в ВК нужно:

1. Открыть приложение ВК. Если оно не установлено, то нужно .
2. Открыть меню Вконтакте, нажав на значок с 3 горизонтальными линиями, расположенный в нижней навигационной панели.
3. Зайти в настройки ВК, нажав на значок с иконкой шестеренки, расположенной в верхнем правом углу.

   

4. Сразу же, на первом экране, отдельным пунктом идет функция «Тёмная тема», передвинув ползунок вправо, включится ночная тема ВК, фон станет черным.

   

VK Helper

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

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

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

Приложение Вконтакте на iPhone ничем не отличается от приложения для Android, поэтому инструкция, полностью идентичная для обоих типов устройств.

Как сделать фон ВК черным на iPhone:

1. Открыть приложение ВК;
2. Перейти в меню, нажав на значок с тремя горизонтальными линиями;
3. Зайти в настройки, нажав на значок с шестеренкой;
4. Активировать переключатель рядом с пунктом «Тёмная тема».

Дополнительная информация

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

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

Как сделать темную тему ВК на ПК

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

И в качестве этих вспомогательных средств выступают расширения для браузеров, которые позволяют сделать красивый дизайн ВК в черных тонах:

Темная тема ВК в Google Chrome

Список расширений, позволяющих включить темную тему в браузере Google Chrome:

• VK Styles
• VKTop
• Темная тема для ВК

Черная тема ВК для Яндекс браузера

Темная тема для ВК в Яндекс браузере делается с уже упомянутыми расширениями для Google Chrome:

• VK Styles
• VKTop
• Темная тема для ВК

Темная тема ВК для Mozilla Firefox

Список расширений, позволяющих сделать темную тему в браузере Mozilla Firefox:

• VK Styles
• Темная тема для ВК

Темный фон ВК для Opera

К сожалению, для Opera нет специализированных расширений, позволяющих поставить нормальную, стильную темную тему для Вконтакте. Но есть плагин, установив который можно добавлять расширения для Google Chrome в Оперу:

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

Не нашли ответ? Тогда воспользуйтесь формой поиска:

Тёмная тема ВК — плюсы и минусы

Тёмный режим для любых приложений и интерфейсов имеет два основных плюса: снижение уровня нагрузки на глаза и экономия заряда аккумулятора. Глаза устают читать текст с ярко-белого экрана — зрение быстро портится. Особенно критично это для тех, кто сидит во «ВКонтакте» в ночное время — при свете лампы или вообще при отключённом освещении.

Если у вас смартфон или ноутбук с экраном OLED, дополнительно ваше устройство будет экономить для себя заряд в аккумуляторе.

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

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

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

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

Смена фона интерфейса социальной сети в браузере

В магазинах расширений есть еще один плагин, который быстро изменит вашу тему ВК на черный. Ранее он был доступен только для браузера Google Chrome. Но сегодня разработчики разрешили пользователям других браузеров использовать их программу для улучшения дизайна социальной сети.

Официальную группу разработчиков ВКонтакте можно найти по адресу https://vk.com/addons. Есть ссылки для трех браузеров: Google Chrome, Mozilla Firefox и Яндекс Браузер.

Работать с расширением достаточно просто:

1. Зайдите в магазин и нажмите кнопку «Установить»;
2. Значок будет отображаться на панели инструментов браузера;

   

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

   

Это означает, что расширение в настоящее время активно. При повторном нажатии на иконку сайт ВКонтакте снова примет стандартную тему.

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

Sketch и Zeplin

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

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

Такие токены мы добавляем рядом с макетами и отправляем всё вместе в Zeplin. Если не понятно сразу по названию или нужно уточнить, к какому элементу относятся токены, добавляем описание и делим токены на секции, описывая конкретные элементы. Используя плагин Sketch Runner для быстрого поиска по названиям символов, мы получили свой конструктор описания тёмной темы в виде аннотаций к макетам.

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

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

Ошибки в реализации тёмной темы можно будет найти уже на стадии тестирования при проверке скриншотов. Тестировщики могут сами заметить явно неправильный цвет и попросить помощи дизайнера — для исправления недочёта понадобится только название правильного токена.

Стоит ли использовать темную тему? Зачем она нужна? Когда ее включать?

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

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

Таким образом, рекомендуется включать автоматическую смену темы в зависимости от освещения или времени суток.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обновления схемы

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

Подготовив обновлённую схему, мы отправляем пулл-реквест в GitHub (запрос на изменение файла), который проверяется и одобряется разработчиками. После слияния изменений разработчикам нужно подтянуть обновление UI-библиотеки, и тогда новые цвета появятся в следующей dev-сборке уже через 15 минут.

Чтобы переименовать или удалить токены в схеме, мы создаём мажорное обновление, поднимая её версию в GitHub. Это означает, что такая версия автоматически примениться не сможет, и перед обновлением версии UI-библиотеки разработчикам необходимо поддержать все изменения: обновить названия токенов, а если удаляемый токен где-то использовался, то нужно следовать комментарию из списка изменений, указывающему, какой токен нужно использовать вместо него.

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