Как сделать вк черным

Алан-э-Дейл       29.04.2022 г.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В чем достоинство темного режима и зачем его включать в VK

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

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

Темный режим приложений всех видов помогает многократно снизить нагрузку на зрительный орган

Особенно это важно делать перед сном, когда вы листаете ленту Вконтакте или другой социальной сети

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

Большинство современных дисплеев имеют OLED-экраны, которые не требуют подсветки в отличие от LCD дисплеев. На OLED дисплеях пиксели в серных местах отключаются, это и экономит заряд батареи.

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

А еще было бы классно, чтобы темную тему ВК на Android или iOS сделали автоматической. Чтобы днем интерфейс был светлым, а ближе к вечеру переходил в ночной режим.

Sketch и Zeplin

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

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

Так выглядит токен в виде символа

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

Добавление описания о используемых токенах

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

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

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

Выключение света

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

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

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

Конечно, многим неудобно читать посты с затемненным фоном, но ночью они читаются просто на ура.

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. Зайдите в бургерное меню настройки в верхней части экрана.
  2. Выберите пункт “Настройки” – появится экран, разделенный на две части. В левой найдите строку “Интерфейс”, а в правой выберите “Цветовая схема”.
  3. Переключите ползунок возле слова “темная”.
  4. Перезапустите программу и попробуйте зайти заново на сайт – теперь привычный вид социальной сети измениться.

Для Opera существует несколько расширений, позволяющих менять фоновый цвет страниц на темный, самое популярное из них – Dark Mode. Для его установки:

Зайдите в магазин расширений или откройте меню и выберите строку “загрузить расширение”;

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

Для браузера Mozilla Firefox подходит расширение Stylish, позволяющее подключить плагин темной темы на всех существующих платформах. Для его установки:

С телефона

Подавляющее большинство пользователей «сидят» во ВКонтакте через мобильное приложение – тенденция к увеличению числа мобильных пользователей неустанно росла до 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. Переходим к сайту социальной сети. Светлые элементы будут несколько затемнены, что упростит работу с ВК.

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

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

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

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

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

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

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

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

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

2. Расширение для C hrome — 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, но, к сожалению, аналогичной функции у гуглофонов пока нет, но в скором времени планируется и тогда настройка будет аналогична.

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

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

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

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

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

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

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

Что такое темная тема

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

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

Темная тема ВК на компьютере

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

VK Helper

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

Совместимо оно со всеми самыми популярными браузерами, а это значит, что темная тема ВК на ПК станет доступна в Яндексе, Goole Chrome, Opera и Firefox и другими, работающими на движке cromium. Скачать и установить его можно с официального сайта vk-helper.pro/pages/download.html.

Перенесите архив с расширением на рабочий стол своего ПК, чтобы его было проще найти, распакуйте его.

  • После этого откройте браузер и перейдите в настройки. Как правило это делается нажатием на значок в правом верхнем углу страницы (это могут быть три черточки, шестеренка или вертикальные точки).
  • Вызовите следующие пункты меню «Дополнительные инструменты» — «Расширения».
  • В появившемся окне выберите «Загрузить распакованное расширение», и через открывшийся проводник найдите папку с плагином.
  • По завершении установки, вы окажетесь на официальной страничке расширения, где сможете найти полное руководство по его применению. Теперь давайте выясним как сделать темную тему ВК на компьютере.
  • Справа от адресной строки в браузере появится новый значок в виде букв VK — кликните по нему.
  • В появившемся окошке выберите «Добавить аккаунт».
  • Далее введите свой логин и пароль от своего аккаунта.
  • После того, как вы окажетесь на своей страничке, вновь нажмите на значок расширения.
  • В появившемся окне выберите «Настройки».
  • Прокрутите страничку до раздела «Интерфейс».
  • Возле строчки «Ночная тема» активируйте галочку.

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

Stylish

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

  • Появится дополнительное окошко, в нем также кликните «Установить расширение».
  • Справа от адресной строки в браузере появится значок плагина в виде букв S на радужном квадрате.
  • Выполните вход в свой аккаунт с ПК.
  • Кликните по значку плагина и выберите пункт «Найти больше стилей для этого сайта».
  • После этого откроется страница с различными настройками. Здесь вы сможете как поставить темную тему, так и любую другую в ВК на ПК.
  • Здесь на выбор представлено много вариантов, по названиям вы поймете какие из них активируют черный фон.
  • Кликните «Get Style», чтобы включить темный фон.
  • При желании вы можете воспользоваться кнопкой «Customize Settings», чтобы произвести дополнительные настройки.
  • После чего нажмите кнопку «Install Style».

Вот как можно сделать ВК черным на ПК благодаря этому плагину. Если вы захотите вернуть первоначальные настройки, то расширение можно будет просто отключить. Сделать это можно нажав на кнопочку, которая находится в верхней строчке, при нажатии на значок плагина (Stylish On — Stylish Off).

Dark theme for VK

  • В появившемся окне нужно еще раз нажать «Установить расширение».
  • Теперь при входе свой аккаунт на ПК вы увидите темную тему во всей красе.

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

Как сделать темную тему ВК на Андроид через приложение «Ночной ВК»

Если по какой-либо причине официальный Android-клиент не понравился или не подошел, можно установить на мобильное устройство «Ночной ВК». Отдельное приложение предоставляет сразу два стиля оформления – светлый и темный, причем переключение между ними можно настроить таким образом, что в зависимости от времени суток (день или ночь) смена оформления будет производиться автоматически.

Чтобы установить программу на мобильное устройство, нужно зайти в Плей Маркет и скачать приложение. Для этого удобно воспользоваться поиском по названию. Когда «Ночной ВК» появится на экране, останется только нажать на клавишу «Установить»

Далее понадобится сделать следующее.

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

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

Гость форума
От: admin

Эта тема закрыта для публикации ответов.