В конце 2019 года зарелизили iOS 13 и Android 10 с поддержкой автопереключения на тёмную тему. Мы решили добавить её в приложение «Ростелеком Ключ» под iOS и Android, над которым работали в тот момент.
В процессе не обошлось без сложностей. Рассказываем о нашем опыте, чтобы вы в аналогичной ситуации сэкономили время и нервы.
Привет! Меня зовут Богдан. Я продуктовый дизайнер, который очень любит Tilda. Я часто использую Zero Block в Tilda при создании сайтов. На примере базы знаний комьюнити-бюро Compot я покажу, как сделать тёмную тему на Tilda в Zero Block.
От Microsoft, «Яндекса», «ВКонтакте» и других компаний.
Опубликуйте страницу и все готово! Если что-то не получилось или есть вопросы пишите в Telegram @al_bogdan.
Лучшая благодарность – подпишитесь на мой телеграм-канал Design Fintech. Подобные штуки буду публиковать там.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"#темнаятема #tilda
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":32,"favorites":149,"reposts":0,"views":271,"hits":16981,"reads":null,"online":0},"dateFavorite":0,"hitsCount":16981,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/design/112476-kak-sdelat-temnuyu-temu-na-tilda","author":{"id":244222,"name":"Богдан Алексеев","nickname":null,"description":"Дизайн-директор в ВТБ. Пишу о финтехе: менеджмент, исследования, инсайты. https://t.me/designfintech","uri":"","avatar":{"type":"image","data":{"uuid":"e53884bd-17fb-508b-8295-d33f5b314218","width":1119,"height":956,"size":288130,"type":"png","color":"19171a","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAHAAcAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAACAUJ/8QAIhAAAQQBBAIDAAAAAAAAAAAAAQIDBAUHAAYRIQgSIzNR/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAMEAf/EABsRAAIDAAMAAAAAAAAAAAAAAAACAQMxISJB/9oADAMBAAIRAxEAPwC5kfyswzt7LUOjstx2ilULqo09UVDwZjSA4OQfUgOdewXyFAAdd6U9djOsrPHpTS9S1Orx2nBF1u7ts3FdFtq27iPxJrCJEd1LnS21pCkqHP6CDppMYuZNccXk3fK1OKKjf2PJJ7+9emRgDFx3Ompx/thKZj4ApoQADh6+BGsnQP/Z"}},"cover":{"cover":{"type":"image","data":{"uuid":"176fa96c-8695-5e34-8cca-9ae147e009fb","width":2170,"height":414,"size":71580,"type":"png","color":"141414","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAHAAcAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAUGCP/EACMQAAEDAgUFAAAAAAAAAAAAAAECAwQAEQUGBxIhFBUiMWH/xAAWAQEBAQAAAAAAAAAAAAAAAAAFAAT/xAAiEQACAQMCBwAAAAAAAAAAAAABAgADBAUSQUJRYZGhwdH/2gAMAwEAAhEDEQA/AMSYjl/RyGhp+HmLHpag4Q7GWiO0oISQDdW4gE8kWv6oe2q5l3Ir00UbEEn1Dme8JKqoHUmL+l0bV5d3zQm/O0RWTb5fdzSYN1yXzMuvLDgTufkh61RiFUp//9k="}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5179223,"userId":244222,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5179223"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1555136,"userId":244222,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1555136"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":328428,"userId":244222,"count":0,"shareImage":"https://api.vc.ru/achievements/share/328428"}],"lastModificationDate":1764938357,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199114,"name":"Дизайн","description":"Материалы о красивых вещах, логотипах, веб-дизайне.","uri":"/design","avatar":{"type":"image","data":{"uuid":"81132c2d-ddb6-0127-19d6-e1d1293194b1","width":0,"height":0,"size":1,"type":"jpg","color":"","hash":"","external_service":[]}},"cover":{"type":"image","data":{"uuid":"b8bf3924-2ba4-571c-a7b6-4be86417c6b9","width":960,"height":280,"size":21376,"type":"png","color":"dd6a8c","hash":"","external_service":[]}},"lastModificationDate":1620994027,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"design","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":25}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}},{"type":"entry","data":{"id":95508,"customUri":null,"subsiteId":8729,"title":"Оформить тёмную тему с умом: заметки, инструкции и примеры для дизайнеров интерфейсов","date":1575362681,"dateModified":1575362681,"blocks":[{"type":"text","cover":true,"hidden":false,"anchor":"","data":{"text":"От Microsoft, «Яндекса», «ВКонтакте» и других компаний.
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"4e9e60de-d690-c832-01b4-4ded804c8cfd","width":2432,"height":1216,"size":139786,"type":"jpg","color":"1e1e1e","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Базовые знания дают гайдлайны платформ:
"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Material Design (пара слов от их дизайнеров).","iOS.","Windows."],"type":"UL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Читая аргументацию для тёмной темы, ощущаешь дежавю. Ровно те же слова и схожесть решения были в Windows Phone (экономия батареи в OLED-экранах, меньше устают глаза — девять лет назад, если что). Photoshop перекрасился в тёмный в 2012 году. Что же, главное, что хотя бы в таком виде это доехало до массового пользователя.
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"Интерфейс в Windows Phone","image":{"type":"image","data":{"uuid":"b00349f1-a7ec-0e01-794e-cd7e74a15bf3","width":686,"height":293,"size":34675,"type":"jpg","color":"e9e9e9","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Новую волну интереса породила прошлогодняя macOS Mojave с тёмной темой оформления. Тогда же пошли первые толковые статьи на тему:
"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Энди Кларк: поддержка тёмной темы на сайте через медийные запросы.","Марцин Викари: изменение ключевых переменных в CSS.Тёмная тема — один из главных драйверов внедрения токенов. Чтобы покрасить одни и те же элементы интерфейса разными цветами в разных ситуациях, компании внедряют переменные для цветов и находят способ их раздачи в продукт.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Например, хорошая история получилась у «ВКонтакте». Здорово пригодились уже существовавшие токены для внедрения в «Почте Mail.ru».
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"60a0f547-eed2-de04-b92a-9bd93b6ccedf","width":1430,"height":504,"size":63967,"type":"jpg","color":"111316","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Естественно, такое хочется и в инструментах дизайна. Плагин Color System для Sketch позволяет организовать переменные для цвета в токены и переключать светлую и тёмную темы. Пара слов от автора.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Письма рассылки"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Одна из проблем — почтовые клиенты, где тело письма приходит в виде HTML и картинок (там может быть что угодно). Элис Ли собрала шикарную памятку для создателей писем, также про это писал Кевин Мандевиль.
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"727f9b0f-36b1-8c0e-9143-15ef29e373c3","width":1380,"height":724,"size":204709,"type":"jpg","color":"323337","hash":"","external_service":[]}}}]}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Рассказ о нескольких подходах к автоматизированному перекрашиванию писем рассылки в «Яндекс.Почте».
"}},{"type":"media","cover":false,"hidden":false,"anchor":"","data":{"items":[{"title":"","image":{"type":"image","data":{"uuid":"53a238e4-332e-fed3-a32c-2f20a9341335","width":2215,"height":1205,"size":525946,"type":"jpg","color":"0f0b09","hash":"","external_service":[]}}}]}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Браузеры и сайты"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"В ближайшем будущем это коснётся и сайтов. Chrome 76 поддерживает тёмную тему на уровне браузера. Она включится автоматически, если предусмотрена на сайте. Firefox тоже в деле.
"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Коос Лоойестайн описывает, как переключать тёмную или светлую темы на сайте, исходя из настроек и времени дня у пользователя. Также — плавный переход при переключении.
"}},{"type":"header","cover":false,"hidden":false,"anchor":"","data":{"style":"h2","text":"Кейсы"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"Вот что рассказывают компании, которые прикрутили тёмную тему к продуктам:
"}},{"type":"list","cover":false,"hidden":false,"anchor":"","data":{"items":["Superhuman. Шикарная памятка, советы хорошо подкреплены примерами и теоретическими выкладками.","Microsoft. Компания раскатала её на все мобильные продукты в офисной линейке. Ещё от неё — про большой Office.","Discord. Тёмная тема давно стала самой популярной, но сервис хотел сделать добротной и привычную светлую."],"type":"OL"}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"#интерфейсы #темнаятема
"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":4,"favorites":179,"reposts":0,"views":4,"hits":5629,"reads":null,"online":0},"dateFavorite":0,"hitsCount":5629,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":true,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/design/95508-oformit-temnuyu-temu-s-umom-zametki-instrukcii-i-primery-dlya-dizainerov-interfeisov","author":{"id":8729,"name":"Yury Vetrov","nickname":null,"description":null,"uri":"","avatar":{"type":"image","data":{"uuid":"d1d26cf3-638b-5dd8-86c0-735699262f17","width":1791,"height":1791,"size":751123,"type":"png","color":"e7c670","hash":"306044606020e8ca","external_service":[]}},"cover":null,"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":5412187,"userId":8729,"count":0,"shareImage":"https://api.vc.ru/achievements/share/5412187"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 24 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":1788100,"userId":8729,"count":0,"shareImage":"https://api.vc.ru/achievements/share/1788100"},{"title":"5 лет на vc.ru","code":"registration_5_years","description":"Провёл 5 лет вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"a9140d54-73b8-5f40-afa8-449fbaafd42b","formats":{"glb":"https://static.vc.ru/achievements/whale.glb","usdz":"https://static.vc.ru/achievements/whale.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.533203125,"textY":0.658203125,"logoX":0.533203125,"logoY":0.77734375,"logoXNoText":0.4375,"logoYNoText":0.66015625},"id":561392,"userId":8729,"count":0,"shareImage":"https://api.vc.ru/achievements/share/561392"}],"lastModificationDate":1764938357,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":false,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":"pdigest","isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199114,"name":"Дизайн","description":"Материалы о красивых вещах, логотипах, веб-дизайне.","uri":"/design","avatar":{"type":"image","data":{"uuid":"81132c2d-ddb6-0127-19d6-e1d1293194b1","width":0,"height":0,"size":1,"type":"jpg","color":"","hash":"","external_service":[]}},"cover":{"type":"image","data":{"uuid":"b8bf3924-2ba4-571c-a7b6-4be86417c6b9","width":960,"height":280,"size":21376,"type":"png","color":"dd6a8c","hash":"","external_service":[]}},"lastModificationDate":1620994027,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"design","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":26}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null}}],"ogTitle":null,"ogDescription":null,"isAnonymized":true}};