Комментарии 49
Например:
У CSS-фильтра есть ещё один недостаток. Он изменяет рендеринг шрифтов, выключается субпиксельное сглаживание текста.
Но не смотря на все недостатки, это крайне универсальная штука — всего один юзерстиль и уже есть тёмная тема для всех сайтов разом.
Потому что на ретине это не так актуально, и к тому же из-за возможности вращать телефон, нужно было бы применять разные способы сглаживания в разной ориентации.
Что-то с картинками точно придётся придумать — артефакты неприятные. В некоторых случаях (однотонные картинки и черные логотипы) это точно безопасно. Нужно только определиться с агрессивностью.
Темная тема — отдельная опция в настройках. Я её нажал и да, я буду ожидать, что вещи будут по-другому выглядеть — мой выбор.
Сравнивая с ранними браузерами, как концептом, главное было — передать информацию. Как текст отображался, какой шрифт и размер, какой размер экрана — вот это всё было за пользователем, и страницы (ожидаемо) могли выглядеть по-разному. Хотели иметь Comic Sans 24пт? Пожалуйста, в настройках браузера.
Сейчас всё наоборот. Шрифт обязательно жёстко прописан в HTML/CSS и, как и весь остальной дизайн предписывается пользователю. Сместилась парадигма от "как-нибудь отобразить контент" до "чтобы обязательно у всех одинаково выглядело, как в макете". (Потому что технологии позволяют)
Пример: использую я DarkReader расширение (ссылка в комм. выше) — сайты у меня теперь темные. Вот вы будете мне мешать изменять цвет на темный? Да, не "девственный" вид, да, не по style guide, от этого что-то хуже стало? Если тот же логотип не гнусно искаверкан, то он узнается.
Лучше пример: встроенная читалка в Firefox. Некоторые нынешние вебсайты такого надизайнили, что читать в Reader банально удобнее (а был пример — ultra light font, тот вовсе был не распозноваем для комфортного чтения).
Тут либо удобство пользователя (и контроль на его стороне), либо "видение" дизайнера. Мне, как вы видите, второе начало надоедать.
Осталось только узнать, поддерживается ли это в браузерах на остальных системах/окружениях, допустим как это работает в 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. Оттенки серого вобщем:
А на чем вы собираетесь делать спектральный анализ картинок если не секрет?
— перевернутый скролл
— отсутствие группировки по отправителю
Идеальный почтовый клиент в моем понимании — это каналы в телеграм. Каждый отправитель это канал, раз. Напротив каждого отправителя — количество непрочитанных сообщений — два. При клике на отправителя — читаю его письма в хронологичеком порядке, начиная с последнего прочитанного — три. Собственно мое приложение придерживается тех же принципов и изначально я писал почтовый клиент. Это уже на ходу переобулся в читалку. Но надеюсь когдать вернусь к этому вопросу.
Samsung Galaxy Note 8
Мне приходилось тоже заниматься перекрашиванием стилей, хотя делал это на более простых стилях, и для моей цели это подошло.
Делал это конвертацией цвета в lab, и инвертированием L канала.
Однако чисто инвертация не очень хороша. На AMOLED экранах да, чисто чёрный цвет можно использовать, но всё же пока большинство использует IPS.
И ещё, тёмная Holo тема не использует чёрный в качестве фона.
Так что я конвертировал цвета с небольшим смещением относительно будущего чисто чёрного цвета.
outLab[0] = 100 — outLab[0] * 0.85
Отлично подошло под Holo тему.
Вообще в приложениях с несколькими темами наверно неплохо делать две тёмных темы: тёмную и чёрную для amoled экранов.
Плюс lab специально создавался c подстройкой под человеческое зрение.
CIELAB был разработан, чтобы быть перцептивно однородным по отношению к цветовому зрению человека, что означает, что одинаковое количество числовых изменений в этих значениях соответствует примерно одинаковому количеству визуально воспринимаемых изменений.
То есть изменение l канала в lab мне кажется будет лучше восприниматься визуально, чем то же самое в hsl
И скорость обработки ну очень мало различается, особенно если делать hashmap из уже использованных цветов, и определять инверсию для цвета только 1 раз.
С адаптацией картинок возникает ещё больше проблем, потому что вся гистограмма меняется. Затемненная фотка выглядят неестественно, как при плохой экспозиции, выбиваются детали в тенях. Обратите внимание, как у вас пропали складки шарфа на фото.
Ещё одно искажение появится за счет того, что светлые объекты выглядят больше тёмных при одинаковом размере. Заметно меняется ощущение контраста, когда выворачиваются тонкие штрихи, шрифты, обводки. Например, в подвале на третьем скриншоте текст копирайтов на тёмном фоне выглядит ярче, чем на светлом.
Об очевидных проблемах с тенями элементов вы уже упомянули — объемы теряются.
Этот путь, скорее всего, приведёт к возникновению дополнительной мета-разметки или ограничений CSS-свойств для отправителей. Понадобится возможность защищать брендовые цвета, переопределять вручную какие-то нюансы и т.п.
Пользовательский контент по мере развития CSS тоже усложняется: в самом письме могут задействоваться альфа-каналы и цветовые трансформации. Как такой каскад будет выглядеть после дополнительных преобразований — фиг знает. Предположим, фон плашки задан через rgba(255,255,255,0.7) поверх синего контейнера. Совокупно каждый пиксель светлый. И что с этим делать? :)
В общем, дизайн нельзя адекватно затемнить простым смещением всего вдоль оси Brightness/Value. Результат всегда будет отличаться от оригинала, причем разницу трудно предсказать. Вы можете отправить человеку фото своей черной кошки на фоне серой шторы, а прислать в итоге картину Малевича «Черный квадрат» :)
Мне кажется, принципиально более правильный подход — дать возможность отправителям самостоятельно предусматривать ночную версию своих писем. Понятно, что это вводит толику хаоса и не все будут заморачиваться. Но это логичнее. Если уж дневной дизайн создаётся на внешней стороне и находится вне вашего контроля, то на той же стороне должен создаваться и ночной. Нет смысла надстраивать структуру, которая от вас не зависит — результат будет очень шатким.
P.S. Для инверсии логотипа взяли слишком простой пример. В большинстве случаев лого, рассчитанный исключительно на светлый фон, при инверсии будет выглядеть очень плохо:
При всём при этом тема крайне интересная. Спасибо за пост и вообще за то, что делитесь с опытом — здесь есть о чём подумать)
Здесь та же самая картинка c инверсией яркости (плюс 15% белого)
Хотя согласен, что данную процедуру нужно выполнять очень осторожно, и на некоторых логотипах всё равно результат может получиться не очень, особенно на лого с тенями и объёмом.
Кстати, тут напрашивается ещё один интересный аспект: юридический. Во-первых, игры с яркостью — это редактирование изображения, и я не уверен, насколько это вообще легально без согласия правообладателя. Во-вторых, если речь идёт о зарегистрированных торговых марках, то изменение цветовой схемы тоже вызывает вопросы, т.к. цвет может быть значимым с точки зрения охраны прав.
Утрированно говоря, если у одной фирмы логотип — черный круг, а у другой — белый круг, то при инверсии происходит подмена торговой марки)
Насчет логотипов хотел добавить, что всё таки большая часть темных логотипов — монохромные (да, у меня очень большая подборка). В случае с цветным акцентом становится сложнее, но самый адский кейс — черно-белый логотип, у которого, как ни крути, половина теряется.
Юридический аспект нас тоже беспокоил, перекрашивать просто письма нам разрешили. Кажется, что дизайнеры совершенно спокойно рисуют однотонные версии логотипов для использования без учета яркости — шелкографией, выжиганием по дереву, термопечатью, что там еще бывает. Разъяснения ФАС я не получал, но кажется, подмена торговой марки — как раз регистрация белого круга при зарегистрированном черном)
Приятно получать развернутые ответы, спасибо.
Понятно, что мы балансируем между тем, что хотел показать дизайнер (бренд-шеф / айдентити менеджер) и тем, что хочет увидеть зритель. Постмодернистская пауза. Для первого подхода мы откидываемся близко к одной крайности, добавляем цвет поздней осени, смотрим на реакцию.
Дальше у нас целый спектр вариантов посередине:
- заготовить палитру из приятных тёмных цветов и подменять исходные на ближайший по тону;
- искать фирменные цвета и не трогать их;
- оставлять небольшие по площади элементы светлыми.
Каждый способ может сработать, а может и нет: не попробуем — не узнаем.
Вообще вопрос о контроле пользователя над контентом в интернете — очень горячий, особенно если смотреть шире: рядом ещё режим чтения, адблоки, скринридеры, да и автогенерация аннотаций нагоняет.
Выжигает, еще как.
вы вообще свои собственные письма, ваших сервисов видели как отображаются в черной теме?
Яндекс.Касса и пр.?
Как создать тёмную тему и не навредить. Опыт команды Яндекс.Почты