как сделать тему для сайта яндекс

оптимизация сайта

Средняя рыночная цена определяется на основе реальных данных о продажах квартир в этом доме, взятых из открытых источников и нашей базы данных. Подробнее о стоимости квартир в этом доме можно узнать на странице цен по дому. Мероприятия по капремонту дома на Шелепихинском шоссе дом 3 строение 2, планируется проводить если выбрано накопление средств на счете регионального оператора. Оценка выставляется по балльной шкале, расчитывается исходя из близости к дому социальных объектов.

Как сделать тему для сайта яндекс создание сайта контур

Как сделать тему для сайта яндекс

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

Спасибо большое но я почему-то немногу понять или у меня новая версия!? И кстати почему ответ не может быть меньше символов. Стать экспертом Кью. Здравствуйте как сделать темную тему в этом приложении Яндексе в андроиде скажите пожалуйста и где это нужно делать? Яндекс Приложения яндекса. Ответить 9 ответов Интересно 1 7. Отправить экспертам 2. Лариса Соловьева 4 9 3. Историк-архивист, реставратор икон, создатель рисованного видео, автор Вы имеете в виду фон в приложении Яндекс-браузер?

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

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

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

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

Войдите , пожалуйста. Все сервисы Хабра. Как стать автором. Войти Регистрация. Яндекс Как мы делаем Яндекс. Как создать тёмную тему и не навредить. Опыт команды Яндекс. Почты Блог компании Яндекс , Разработка веб-сайтов , Разработка мобильных приложений , Интерфейсы , Usability Меня зовут Владимир, я занимаюсь мобильным фронтендом в Яндекс. Простые способы Прежде чем дойти до нашего волшебного «перекрашивателя», мы опробовали два простых, как пробка, варианта: навесить на элемент дополнительный тёмный стиль или CSS-фильтр.

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

Цвета семантических элементов — ссылок, элементов ввода. Инлайн-SVG — вместо background им нужно выставлять fill , а вместо color — stroke , но это не точно, смотря какой SVG — может быть и наоборот. CSS-фильтр Очень остроумный и элегантный вариант.

Перекрасить страницу можно CSS-фильтром:. С другой стороны, проблем куча, и они скорее перевешивают достоинства: Тёмные страницы осветляются. Итоговыми цветами невозможно управлять — какой фильтр наложить, чтобы подстроить фон к вашему фирменному bbbbb8?

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

Давать возможность настройки цветов. Оставлять тона такими, какими они были вначале. Находим все инлайн-стили. В каждом стиле находим все цветные правила background-color , color , box-shadow и т. Из всех цветных правил достаём цвета, находим нужный преобразователь затемнитель для фона, осветлитель для текста. Вызываем преобразователь. Собираем преобразованные правила обратно в CSS. HSL-преобразования «Затемнить цвет» — не такое простое действие, как может показаться, особенно если мы хотим сохранить тон голубой становится тёмно-синим, а не оранжевым.

Зато работать с цветами в HSL — чистое наслаждение: вместо Red, Green и Blue, с которыми непонятно, что делать, у нас появляются другие три канала: Hue — как раз тон, который мы хотим сохранить. Saturaion — насыщенность, которая нам сейчас не очень важна. Lightness — яркость, которую мы будем менять. Цвета, с которыми и так всё хорошо Иногда ситуация складывается удачно: эксклюзивный дизайн письма или его части уже тёмный.

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

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

CSS-фильтр — прикольно, но работает так себе. Используйте только для непрозрачных в смысле доступа элементов вроде фреймов или веб-компонентов. Преобразование стилей — затемняет очень качественно, но сложнее других методов. Даже если вы никогда не будете этим заниматься, надеюсь, вы интересно провели время! Полезные ссылки : Если вам интересно обсудить эту тему вживую и в контексте разработки под Android, то приглашаем в гости 18 апреля в петербургский офис Яндекса.

Укажите причину минуса, чтобы автор поработал над ошибками. Владимир Клепов thoughtspile. Платежная система. Похожие публикации. Карт 45,3k 46 Вакансии компании Яндекс Стажер-разработчик интерфейсы. Стажёр-разработчик интерфейсов. Cloud Infrastructure dev.

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

Глаза аж выжигать начинает. Пробовал работать с светлой темой IDE и подвыкрученной подсветкой — не, глаза дико устают. Я себе ставлю таймер на 25 минут, затем закрываю глаза секунд на 30 и затем смотрю дальше — получше ощущения. У меня стоит safeeyes linux , настроил там каждые 15 мин разминку для глаз, каждые полчаса — 5 минут отдыха :.

Для linux есть redshift, там можно цветовую гамму менять, да. Этим и живу : Про расширения в курсе, пробовал, не всегда удобно. Для Firefox есть Owl , однако со временем появляются недостатки. Картинки перекрашиваются, а обычные надписи немного странных цветов. Через несколько часов использования выключаешь. Позволю себе с вами не согласится.

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

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

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

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

Все же, тот же логотип хабра или майкрософта даже немного перекрашенные будут восприниматься пользователем по-новому, имхо. Мы еще подумаем, как это лучше сделать, и будем держать это предложение в уме — спасибо! Хорошо, вы берете письмо от известной фирмы с их контрастным логотипом и уникальным дизайном письма и начинаете его перекрашивать? По моему немного некорректный подход если брать в расчет такое понятие как гайдлан и бренд?

Как быть если контора захочет все таки сохранить свой к примеру логотип в девственном виде? Потому что технологии позволяют Пример: использую я DarkReader расширение ссылка в комм. Мы всего лишь даем пользователю возможность использовать такой функционал. По умолчанию идет светлая тема, и там мы стили не трогаем. Жаль, что современные браузеры не умеют сообщить о том, что пользователь предпочитает тёмную тему.

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

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

Они выглядят довольно спорно, но вполне читаемо. Не уверен что такой радикальный формат вам подойдет — но всё же Темная Светлая Для тела статьи — генерируются две картинки. Сжатая дизерингом — как плейсхолдер, на время загрузки. В случае оффлайн доступа — показывается только дизеринг версия оригиналы не скачиваются на устройство для экономии места Основной экран — обычный blue gray в терминах material. Оттенки серого вобщем:. В целом мне не кажется, что для нашего кейса писать свою обработку изображений на клиенте на JS — хорошее решение: потом все будут удивляться, отчего так быстро садится телефон.

На сервере тоже по понятным причинам не хотелось бы. А на чем вы собираетесь делать спектральный анализ картинок если не секрет? Конечно, на том же JS. Но есть одно важное отличие: если я взялся фильтровать картинку, то придётся фильтровать её всю: скромный x уже может всё подвесить. А вот для анализа достаточно взять пикселей — учитывая, что картинки обычно довольно гладкие, будет репрезентативно.

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

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

Я уже писал вам в саппорт, напишу ещё раз здесь: вы меняете тему, но не меняете цвет нижнего бара с кнопками, в итоге чёрный телефон, темная тема и белая полоска внизу. Samsung Galaxy Note 8. Мы твой репорт конечно же учли и уже думаем над тем, как решить проблему. К сожалению, она не решается в лоб. Очень интересная статья. Мне приходилось тоже заниматься перекрашиванием стилей, хотя делал это на более простых стилях, и для моей цели это подошло.

Делал это конвертацией цвета в lab, и инвертированием L канала. Однако чисто инвертация не очень хороша. И ещё, тёмная Holo тема не использует чёрный в качестве фона. Так что я конвертировал цвета с небольшим смещением относительно будущего чисто чёрного цвета. Вообще в приложениях с несколькими темами наверно неплохо делать две тёмных темы: тёмную и чёрную для amoled экранов. Да, с подстройкой к окружающей теме, которая обычно не черная, пришлось повозиться.

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

То есть изменение l канала в lab мне кажется будет лучше восприниматься визуально, чем то же самое в hsl И скорость обработки ну очень мало различается, особенно если делать hashmap из уже использованных цветов, и определять инверсию для цвета только 1 раз.

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

ЧТО ВЫБРАТЬ ДЛЯ СОЗДАНИЯ САЙТА

Стать экспертом Кью. Здравствуйте как сделать темную тему в этом приложении Яндексе в андроиде скажите пожалуйста и где это нужно делать? Яндекс Приложения яндекса. Ответить 9 ответов Интересно 1 7. Отправить экспертам 2. Лариса Соловьева 4 9 3. Историк-архивист, реставратор икон, создатель рисованного видео, автор Вы имеете в виду фон в приложении Яндекс-браузер?

Это несложно. Находясь в приложении на главной странице на ленте ввода запроса нажимаете список три вертикальные точки. Появляется окно с Вашим Ником, Новая вкладка.. Выбирайте нажимайте - кликайте на Изменить фон. На экране появится Читать далее.

Зато работать с цветами в HSL — чистое наслаждение: вместо Red, Green и Blue, с которыми непонятно, что делать, у нас появляются другие три канала:. Такое пространство удобно представлять в виде цилиндра. А наша задача — перевернуть этот цилиндр с ног на голову. Иногда ситуация складывается удачно: эксклюзивный дизайн письма или его части уже тёмный.

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

Аккуратнее, это задача для тех, кто любит запах селекторов по утрам. Самый простой кейс, который ломает нашу затемнённую страницу — изменение инлайн-стилей. Операция частая, но и фикс простой: добавляем MutationObserver и оперативно чиним инлайн-стили при изменениях. Наконец, собирая в кучу все наши проблемы, вспоминаем, что скрипт вообще может добавлять, удалять и переставлять специфичность! Решается всё тем же MutationObserver на элементы стилей, но на каждое изменение — больше обработки.

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

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

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

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

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

Интересно, что иногда картинки вообще не несут никакой смысловой нагрузки — это трекинг-пиксели и «держатели формата» в особо извращённой вёрстке. Такие можно смело сделать невидимыми скажем, opacity: 0. Чтобы решить, что делать с картинкой, нам нужно залезть внутрь и проанализировать её содержимое — причём простым и быстрым способом. По нашему набору проблем вырисовывается первая версия алгоритма.

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

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

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

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

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

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

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

Некоторые нынешние вебсайты такого надизайнили, что читать в Reader банально удобнее а был пример — ultra light font, тот вовсе был не распозноваем для комфортного чтения. Тут либо удобство пользователя и контроль на его стороне , либо "видение" дизайнера. Мне, как вы видите, второе начало надоедать. Тут излишний оптимизм. Ни в Chrome 73, ни даже в Chrome 76 prefers-color-scheme ещё не работает. Последний стабильный Firefox й, а Safari В общем, рано пока. Постмодернистская пауза.

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

Только полноправные пользователи могут оставлять комментарии. Войдите , пожалуйста. Все сервисы Хабра. Как стать автором. Войти Регистрация. Яндекс Как мы делаем Яндекс. Как создать тёмную тему и не навредить. Опыт команды Яндекс. Почты Блог компании Яндекс , Разработка веб-сайтов , Разработка мобильных приложений , Интерфейсы , Usability Меня зовут Владимир, я занимаюсь мобильным фронтендом в Яндекс.

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

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

Инлайн-SVG — вместо background им нужно выставлять fill , а вместо color — stroke , но это не точно, смотря какой SVG — может быть и наоборот. CSS-фильтр Очень остроумный и элегантный вариант. Перекрасить страницу можно CSS-фильтром:. С другой стороны, проблем куча, и они скорее перевешивают достоинства: Тёмные страницы осветляются.

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

Адаптивная тема Настало время волшебства! Из недостатков первых двух подходов собираем чеклист: Делать фон тёмным, текст — светлым, границы — средними. Определять уже тёмные страницы и не перекрашивать их. Сохранять оригинальное соотношение яркостей и контрастов. Давать возможность настройки цветов. Оставлять тона такими, какими они были вначале.

Находим все инлайн-стили. В каждом стиле находим все цветные правила background-color , color , box-shadow и т. Из всех цветных правил достаём цвета, находим нужный преобразователь затемнитель для фона, осветлитель для текста. Вызываем преобразователь. Собираем преобразованные правила обратно в CSS. HSL-преобразования «Затемнить цвет» — не такое простое действие, как может показаться, особенно если мы хотим сохранить тон голубой становится тёмно-синим, а не оранжевым.

Зато работать с цветами в HSL — чистое наслаждение: вместо Red, Green и Blue, с которыми непонятно, что делать, у нас появляются другие три канала: Hue — как раз тон, который мы хотим сохранить. Saturaion — насыщенность, которая нам сейчас не очень важна. Lightness — яркость, которую мы будем менять. Цвета, с которыми и так всё хорошо Иногда ситуация складывается удачно: эксклюзивный дизайн письма или его части уже тёмный. Динамический цирк Хотя нам это и не понадобилось ещё раз спасибо, санитайзер, ты спас меня от безумия!

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

Как затемнять картинки Перекраска картинок — отдельная проблема, которая очень беспокоит меня лично. Эвристики с интроспекцией Чтобы решить, что делать с картинкой, нам нужно залезть внутрь и проанализировать её содержимое — причём простым и быстрым способом.

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

CSS-фильтр — прикольно, но работает так себе. Используйте только для непрозрачных в смысле доступа элементов вроде фреймов или веб-компонентов. Преобразование стилей — затемняет очень качественно, но сложнее других методов. Даже если вы никогда не будете этим заниматься, надеюсь, вы интересно провели время! Полезные ссылки : Если вам интересно обсудить эту тему вживую и в контексте разработки под Android, то приглашаем в гости 18 апреля в петербургский офис Яндекса.

Укажите причину минуса, чтобы автор поработал над ошибками. Владимир Клепов thoughtspile. Платежная система. Похожие публикации. Карт 45,3k 46 Вакансии компании Яндекс Стажер-разработчик интерфейсы. Стажёр-разработчик интерфейсов. Cloud Infrastructure dev. Scala разработчик. Стажер-инженер доступности сервисов. Больше вакансий компании. Поскольку вокруг всегда есть что-то светлое дневной свет, свет от ламп и белый свет от экрана телефона, планшета, ноутбука, то любая темная тема будет жутко раздражать, когда начнёшь переключать взгляд с темного на светлое и обратно.

Глаза аж выжигать начинает. Пробовал работать с светлой темой IDE и подвыкрученной подсветкой — не, глаза дико устают. Я себе ставлю таймер на 25 минут, затем закрываю глаза секунд на 30 и затем смотрю дальше — получше ощущения. У меня стоит safeeyes linux , настроил там каждые 15 мин разминку для глаз, каждые полчаса — 5 минут отдыха :.

Для linux есть redshift, там можно цветовую гамму менять, да. Этим и живу : Про расширения в курсе, пробовал, не всегда удобно. Для Firefox есть Owl , однако со временем появляются недостатки. Картинки перекрашиваются, а обычные надписи немного странных цветов. Через несколько часов использования выключаешь. Позволю себе с вами не согласится. Тёмные темы построенные на базе тёмно-серого фона не раздражают от слова «никак».

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

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

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

Оффтоп, кто-нить создание сайта на блокноте html ответ