Как сделать черный фон браузере. Белым по чёрному

Здравствуйте. Сперва небольшое вступление:
Я работаю в тускло освещённом помещении и, как следствие, не переношу яркие белые фоны. Поэтому я использую расширение Stylish https://addons.opera.com/ru/extensions/details/stylish/ . Это расширение позволяет устанавливать темы (тёмные в частности) на различных сайтах, которые добрые люди мира сего выкладывают и обновляют на сайте https://userstyles.org/ .
Сам пользуюсь Opera, но описанная далее проблема распространяется на все браузеры без исключения.

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

Шаги, чтобы воспроизвести проблему (это пример, не обязательно должны быть именно эти сайты):
1). Зайти на сайт https://translate.google.com/ https://userstyles.org/styles/134994/dark-google-t...
2). Далее перейти на сайт https://en.wikipedia.org/wiki/White , с заранее установленной на нём темой: https://userstyles.org/styles/42313/dark-wikipedia

Что я хочу сделать:
Изменить цвет этой белой "прогрузочной" страницы на тёмно-серый/чёрный цвет. Замечу, что если страница закеширована, то этот фон не появляется, что естественно.

Также замечу, что на некоторых сайтах цвет "прогрузочной" страницы изменён создателями сайта на тёмный (то есть проблема разрешима). И ещё то, что я находил решения этой проблемы, но не знал как их применить. Например вот: https://superuser.com/questions/580228/prevent-whi... . Даже если опустить тот факт, что это решение по-видимому больше не действует, я всё равно не знаю, что мне делать с этими кодами. Следование приведённым "инструкциям" меня ни к чему не приводило.

Я не могу найти решение этой проблемы уже очень долгое время. На всех форумах, на которых я писал ранее, ответа найдено не было. Я подозреваю, что проблема именно в том, что люди не понимали, что требуется сделать, в результате чего я и расписал этот вопрос так развёрнуто на этот раз.
Просьба к вам выключить свет/задёрнуть шторы в вашей комнате и выполнить пункты 1 и 2, чтобы на собственном опыте понять, насколько эта проблема может быть актуальна.
Заранее спасибо.

• Вопрос задан более года назад
• 2797 просмотров

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

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

Но зачем вам это нужно? Когда настает правильное время создать черный фон для вашего сайта? Я собираюсь рассказать обо всем этом и многом другом в этом посте, и справедливое предупреждение: это станет действительно темным, затем еще темнее, и наконец, этот мрачный оттенок, который еще темнее, чем # 555 (ваши коллеги-разработчики знают, что я говорю).

Итак, без лишних слов, давайте исследовать эту черную материю дальше!

Немного о дизайне с черным фоном

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

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

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

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

На практике это звучит так:

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

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

В чем проблема с черным цветом?

Главная из них заключается в том, что люди считают его менее привлекательным, чем другие цвета.

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

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

Как видите, проблема с черным цветом фона реальна.

Итак, есть ли место для черных фонов в дизайне?

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

• Портфолио
• Студии дизайна
• Эксклюзивные презентации продукции
• Нетрадиционный контент

Прежде всего: даже при использовании черного фона важно создать много «белого пространства», потому что черная поверхность визуально меньше. Белый фон также служит «разрывом», который является вещью, отсутствующей на темном фоне. Также важно более тщательно проверить удобство использования. По опыту, вы никогда не должны использовать тонике начертания шрифта, и он всегда должен быть на 2 или 3 пикселя больше, чем тот же шрифт на белом фоне.

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

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

На что вам нужно обратить внимание, так это то, какие цветовые оттенки вы используете. Это касается того, как вы всегда должны использовать тонированный черный цвет в дизайне и что этот оттенок должен исходить из основного цвета, который вы используете. В примерах, которые добавлены, используются тонированные и истинные черные (# 000), поэтому я думаю, что идея не является обязательной.

Идея оттенить базовый цвет исходит от природы, где очень трудно увидеть оттенки #000000 и #ffffff (не только из-за формата).

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

Ситуации, в которых вы всегда можете использовать черный фон

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

• Выделенные разделы
• Хедер, футер, навигация,

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

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

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

Всё, что вам нужно будет сделать, это войти в настройки браузера, а затем выбрать «Дополнительные инструменты» — «Расширения» . Внутри раскройте пункт «Расширения» и выберите «Открыть интернет-магазин гугл хром» .

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

Темная тема ВК

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

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

VK helper

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

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

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

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

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

Как сделать темную тему на телефоне Android

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

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

Установить ее вы можете официально с Google Play введя ее название в поиске или перейдя по этой ссылке . А дальше просто заходите в приложение, авторизируйтесь и работаете в обычном режиме.

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

Итог

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

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

Ну а на этом я заканчиваю. Обязательно подписывайтесь на уведомения моего блога и паблики в социальных сетях. Удачи вам. Пока-пока!

С уважением, Дмитрий Костин.