Pull to refresh

Comments 49

Поскольку вокруг всегда есть что-то светлое (дневной свет, свет от ламп и белый свет от экрана телефона, планшета, ноутбука, то любая темная тема будет жутко раздражать, когда начнёшь переключать взгляд с темного на светлое и обратно.
и к чему этот комментарий?
У меня раздражение, когда я 100% времени работаю с темной темой IDE и приходится переключаться с в браузер, чтобы что-то подглядеть в гугле. Глаза аж выжигать начинает. Пробовал работать с светлой темой IDE и подвыкрученной подсветкой — не, глаза дико устают
Я себе ставлю таймер на 25 минут, затем закрываю глаза секунд на 30 и затем смотрю дальше — получше ощущения.
У меня стоит safeeyes (linux), настроил там каждые 15 мин разминку для глаз, каждые полчаса — 5 минут отдыха :)
Для linux есть redshift, там можно цветовую гамму менять, да. Этим и живу :)
Про расширения в курсе, пробовал, не всегда удобно.
Для Firefox есть Owl, однако со временем появляются недостатки. Картинки перекрашиваются, а обычные надписи немного странных цветов. Через несколько часов использования выключаешь.
Позволю себе с вами не согласится. Тёмные темы построенные на базе тёмно-серого фона не раздражают от слова «никак». Хотя, допускаю, тут играют роль индивидуальные особенности.

Например:

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

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

Потому что на ретине это не так актуально, и к тому же из-за возможности вращать телефон, нужно было бы применять разные способы сглаживания в разной ориентации.
Мне кажется, идея с автоматической перекраской картинок отрицательно скажется на юзабилити — увидев письмо от легитимного автора(банк, тот же Яндекс) совершенно не ожидаешь, что простое изменение темы с обычной на темную перекрасит картинки внутри писем. Увидев, например, знакомый логотип «зеленого» банка в незнакомой расцветке, сразу проявишь настороженность, пойдешь на оф. сайт(а«вдруг ребрендинг, пока я спал?»), поймешь, что ничего не изменилось, и в итоге потратишь уйму времени на выяснение того, что это за письмо(проверяя линки внутри письма и т.д.)
Вопрос с брендовыми цветами сложный, да (касается не только картинок). Я всё таки подозреваю, что совсем потерявшийся логотип хуже перекрашенного — это же важный якорный объект для листания писем.

Что-то с картинками точно придётся придумать — артефакты неприятные. В некоторых случаях (однотонные картинки и черные логотипы) это точно безопасно. Нужно только определиться с агрессивностью.
Может быть, добавить какой-нибудь чекбокс «Перекрашивать картинки в соответствии с цветовой темой» рядом с кнопкой включения темной темы либо как-то явно уведомлять о перекрашивании картинок в теле письма при включении? Все же, тот же логотип хабра или майкрософта даже немного перекрашенные будут восприниматься пользователем по-новому, имхо.
Мы еще подумаем, как это лучше сделать, и будем держать это предложение в уме — спасибо!
Хорошо, вы берете письмо от известной фирмы с их контрастным логотипом и уникальным дизайном письма и начинаете его перекрашивать? По моему немного некорректный подход если брать в расчет такое понятие как гайдлан и бренд? Как быть если контора захочет все таки сохранить свой к примеру логотип в девственном виде?

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


Сравнивая с ранними браузерами, как концептом, главное было — передать информацию. Как текст отображался, какой шрифт и размер, какой размер экрана — вот это всё было за пользователем, и страницы (ожидаемо) могли выглядеть по-разному. Хотели иметь Comic Sans 24пт? Пожалуйста, в настройках браузера.


Сейчас всё наоборот. Шрифт обязательно жёстко прописан в HTML/CSS и, как и весь остальной дизайн предписывается пользователю. Сместилась парадигма от "как-нибудь отобразить контент" до "чтобы обязательно у всех одинаково выглядело, как в макете". (Потому что технологии позволяют)


Пример: использую я DarkReader расширение (ссылка в комм. выше) — сайты у меня теперь темные. Вот вы будете мне мешать изменять цвет на темный? Да, не "девственный" вид, да, не по style guide, от этого что-то хуже стало? Если тот же логотип не гнусно искаверкан, то он узнается.


Лучше пример: встроенная читалка в Firefox. Некоторые нынешние вебсайты такого надизайнили, что читать в Reader банально удобнее (а был пример — ultra light font, тот вовсе был не распозноваем для комфортного чтения).


Тут либо удобство пользователя (и контроль на его стороне), либо "видение" дизайнера. Мне, как вы видите, второе начало надоедать.

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

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

Пока я вижу, что вопрос ещё открыт.

Кроме MacOS, в Windows 10 также есть Dark Mode, и Firefox 67 это поддерживает. Но:


Safari 12.1, Chrome 73 and Firefox 67 support Dark Mode!

Тут излишний оптимизм. Ни в Chrome 73, ни даже в Chrome 76 prefers-color-scheme ещё не работает. Последний стабильный Firefox 66-й, а Safari 12.1 выпущен лишь неделю назад. В общем, рано пока.

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

Темная



Светлая



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



Основной экран — обычный blue gray в терминах material. Оттенки серого вобщем:

Глитч-арт! В целом мне не кажется, что для нашего кейса писать свою обработку изображений на клиенте на JS — хорошее решение: потом все будут удивляться, отчего так быстро садится телефон. На сервере тоже по понятным причинам не хотелось бы.

А на чем вы собираетесь делать спектральный анализ картинок если не секрет?

Конечно, на том же JS. Но есть одно важное отличие: если я взялся фильтровать картинку, то придётся фильтровать её всю: скромный 800x600 уже может всё подвесить. А вот для анализа достаточно взять 1000 пикселей — учитывая, что картинки обычно довольно гладкие, будет репрезентативно.
А вообще лично меня в почтовых клиентах раздражают две вещи:
— перевернутый скролл
— отсутствие группировки по отправителю
Идеальный почтовый клиент в моем понимании — это каналы в телеграм. Каждый отправитель это канал, раз. Напротив каждого отправителя — количество непрочитанных сообщений — два. При клике на отправителя — читаю его письма в хронологичеком порядке, начиная с последнего прочитанного — три. Собственно мое приложение придерживается тех же принципов и изначально я писал почтовый клиент. Это уже на ходу переобулся в читалку. Но надеюсь когдать вернусь к этому вопросу.
Пришло письмо на группу товарищей, один из товарищей ответил, другой- искать теперь по трём каналам, или как разруливать?
Я уже писал вам в саппорт, напишу ещё раз здесь: вы меняете тему, но не меняете цвет нижнего бара с кнопками, в итоге чёрный телефон, темная тема и белая полоска внизу.
Samsung Galaxy Note 8
image
Привет! Мы твой репорт конечно же учли и уже думаем над тем, как решить проблему. К сожалению, она не решается в лоб.
Очень интересная статья.
Мне приходилось тоже заниматься перекрашиванием стилей, хотя делал это на более простых стилях, и для моей цели это подошло.
Делал это конвертацией цвета в lab, и инвертированием L канала.
Однако чисто инвертация не очень хороша. На AMOLED экранах да, чисто чёрный цвет можно использовать, но всё же пока большинство использует IPS.
И ещё, тёмная Holo тема не использует чёрный в качестве фона.
Так что я конвертировал цвета с небольшим смещением относительно будущего чисто чёрного цвета.
outLab[0] = 100 — outLab[0] * 0.85
Отлично подошло под Holo тему.
Вообще в приложениях с несколькими темами наверно неплохо делать две тёмных темы: тёмную и чёрную для amoled экранов.
Да, с подстройкой к окружающей теме, которая обычно не черная, пришлось повозиться. Если не секрет, почему LAB, а не HSL / HSV, которые концептуально попроще?
В основном из за опыта использования lab в фотошопе. Приходилось много где с его каналами колдовать. Он очень хорош для операций я яркостью и насыщенностью.
Плюс lab специально создавался c подстройкой под человеческое зрение.
CIELAB был разработан, чтобы быть перцептивно однородным по отношению к цветовому зрению человека, что означает, что одинаковое количество числовых изменений в этих значениях соответствует примерно одинаковому количеству визуально воспринимаемых изменений.

То есть изменение l канала в lab мне кажется будет лучше восприниматься визуально, чем то же самое в hsl
И скорость обработки ну очень мало различается, особенно если делать hashmap из уже использованных цветов, и определять инверсию для цвета только 1 раз.
Когда вы механически понижаете brightness в HSB/HSV, возникают оптические искажения, т.к. цветовосприятие не полностью соответствует «математике». Например, для глаз не существует тёмно-жёлтого цвета — он воспринимается как грязно-коричневый (хорошо заметно на третьем скриншоте). Чистый синий #0000ff изначально выглядит фиолетовым, но при понижении яркости синеет. И т.д. Плюс при естественном затенении тон обычно слегка смещается в холодную сторону.

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

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

Об очевидных проблемах с тенями элементов вы уже упомянули — объемы теряются.

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

Пользовательский контент по мере развития CSS тоже усложняется: в самом письме могут задействоваться альфа-каналы и цветовые трансформации. Как такой каскад будет выглядеть после дополнительных преобразований — фиг знает. Предположим, фон плашки задан через rgba(255,255,255,0.7) поверх синего контейнера. Совокупно каждый пиксель светлый. И что с этим делать? :)

В общем, дизайн нельзя адекватно затемнить простым смещением всего вдоль оси Brightness/Value. Результат всегда будет отличаться от оригинала, причем разницу трудно предсказать. Вы можете отправить человеку фото своей черной кошки на фоне серой шторы, а прислать в итоге картину Малевича «Черный квадрат» :)

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

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



При всём при этом тема крайне интересная. Спасибо за пост и вообще за то, что делитесь с опытом — здесь есть о чём подумать)
Хотелось бы указать вам, что вы перепутали понятия «инвертирование изображения» и «инвертирование яркости изображения»
Здесь та же самая картинка c инверсией яркости (плюс 15% белого)
Скрытый текст


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

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

Утрированно говоря, если у одной фирмы логотип — черный круг, а у другой — белый круг, то при инверсии происходит подмена торговой марки)
Отлично, пока я расчехлял гимп, чтобы порезать картинку пополам, меня опередили.

Насчет логотипов хотел добавить, что всё таки большая часть темных логотипов — монохромные (да, у меня очень большая подборка). В случае с цветным акцентом становится сложнее, но самый адский кейс — черно-белый логотип, у которого, как ни крути, половина теряется.

Юридический аспект нас тоже беспокоил, перекрашивать просто письма нам разрешили. Кажется, что дизайнеры совершенно спокойно рисуют однотонные версии логотипов для использования без учета яркости — шелкографией, выжиганием по дереву, термопечатью, что там еще бывает. Разъяснения ФАС я не получал, но кажется, подмена торговой марки — как раз регистрация белого круга при зарегистрированном черном)

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


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


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


  • заготовить палитру из приятных тёмных цветов и подменять исходные на ближайший по тону;
  • искать фирменные цвета и не трогать их;
  • оставлять небольшие по площади элементы светлыми.

Каждый способ может сработать, а может и нет: не попробуем — не узнаем.


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

Идея о том чтобы отправитель мог заложить в письме поддержку темной темы здравая. Для нас это следующий шаг.
Всегда удивлялся тому, что стандартом де-факто является черный текст на белом фоне. Нам ведь реально приходится часами смотреть на горящую лампочку. Это вредно и неудобно. Думаю, это все началось с Microsoft Word, который воплощал концепцию what you see is what you get. Чтобы сымитировать видимость белой бумаги стали всюду клепать белый фон. К сожалению, никому не пришло в голову, что на листе бумаги мы видим отраженный рассеянный свет, а на мониторе — прямое излучение. И только сейчас до разработчиков интерфейсов начало доходить, что до сих пор мы двигались не туда.
на листе бумаги мы видим отраженный рассеянный свет, а на мониторе — прямое излучение

Монитор — не лазер, глаза не выжигает.

Вы сейчас с физикой или физиологией спорите? При одинаковой яркости монитора и окружающего освещения нет никакой разницы.
Я вообще ни с чем собираюсь спорить.
Вы уже сами все подтвердили, уточнив, какие
условия должны выполняться для сохранения зрения.
Эти условия обеспечить на мониторе без адаптивной
регулировки яркости невозможно.
А вручную регулировать яркость освещения/монитора религия не позволяет?
Дорогой Яндекс!
вы вообще свои собственные письма, ваших сервисов видели как отображаются в черной теме?
Яндекс.Касса и пр.?
Sign up to leave a comment.