Популярное
Свежее
Моя лента
Сообщения
Рейтинг
Курсы
Темы
Маркетинг
Сервисы
AI
Личный опыт
Деньги
Инвестиции
Право
Карьера
Путешествия
Крипто
Показать все
vc.ru
О проекте
Правила
Реклама
Приложения
Богдан Алексеев
Дизайн

Как сделать темную тему на Tilda

Привет! Меня зовут Богдан. Я продуктовый дизайнер, который очень любит Tilda. Я часто использую Zero Block в Tilda при создании сайтов. На примере базы знаний комьюнити-бюро Compot я покажу, как сделать тёмную тему на Tilda в Zero Block.

Как сделать темную тему на Tilda

Шаг 1 из 6

Делаем фон основных блоков бесцветным (выставляем значение background - 0).

Шаг 2 из 6

Добавим сам переключатель. Открываем Zero Block (в блоке, где будет переключатель) и добавляем в него HTML-код из левой панели. Вставляем туда код:

<div class="container"> <div class="toggle-container"> <input type="checkbox" id="themeSwitch" name="theme" /><label for="themeSwitch"></label> </div> </div>

Шаг 3 из 6

Добавьте блок T123 (HTML-код) из раздела «Другое». Вставляем этот код:

<style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700'); :root, [data-theme="default"] { --bg: #FCFCFC; --bg-panel: #f5f5f5; --color-headings: #ff035b; --color-text: #333333; } @supports (--css: variables) { [data-theme="dark"] { --bg: #000000; --bg-panel: #1b1b1b; --color-headings: #ff035b; --color-text: #FFFFFF; } } html { height: 100%; font-family: 'Montserrat'; align-items: center; justify-items: center; } label { cursor: pointer; text-indent: -9999px; width: 52px; height: 27px; background: #b1b1b1; float: left; top: 8px; border-radius: 100px; position: relative; } label:after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; background: #fff; border-radius: 90px; transition: 0.3s; } input:checked + label { background: var(--color-headings); } input:checked + label:after { left: calc(100% - 5px); transform: translateX(-100%); } label:active:after { width: 45px; } html.transition, html.transition *, html.transition *:before, html.transition *:after { transition: all 750ms !important; transition-delay: 0 !important; } </style>

Расшифровка:

  • root — светлая тема;

  • support — темная;

  • --bg-panel — цвет хедера;
  • --color — цвета заголовков и основного текста.

Шаг 4 из 6

Узнаем класс элемента, у которого хотим поменять стиль на темную тему. Как узнать класс элемента, смотрите здесь.

Покажу на примере. Мы хотим, чтобы блок с основным контентом переключался на темную тему. Нам нужно узнать класс элемента.

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

Шаг 5 из 6

Добавьте блок T123 (HTML-код) из раздела «Другое» и вставьте код:

<style> body { background-color: var(--bg); } #rec168746003 .tn-elem[data-elem-id="1583581372881"] .tn-atom { background-color: var(--bg-panel); } .t-feed__col-grid__content.t-feed__col-grid__content_paddingtop { background-color: var(--bg-panel); } grid-template-areas: { "title switch" "content content"; } input[type=checkbox]{ height: 0; width: 0; visibility: hidden; } </style>

Расшифровка:

  • rec168746003 .tn-elem[data-elem-id="1583581372881"] .tn-atom - это класс элемента. Замените на свой.

  • var(--bg-panel); — это цвет, на который будем менять. Возьмите из шага 3.

Шаг 6 из 6

Добавьте блок T123 (HTML-код) из раздела «Другое» и вставьте код:

<script> (function() { // Theme switch var themeSwitch = document.getElementById('themeSwitch'); if(themeSwitch) { initTheme(); // if user has already selected a specific theme -> apply it themeSwitch.addEventListener('change', function(event){ resetTheme(); // update color theme }); function initTheme() { var darkThemeSelected = (localStorage.getItem('themeSwitch') !== null && localStorage.getItem('themeSwitch') === 'dark'); // update checkbox themeSwitch.checked = darkThemeSelected; // update body data-theme attribute darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : document.body.removeAttribute('data-theme'); }; function resetTheme() { if(themeSwitch.checked) { // dark theme has been selected document.body.setAttribute('data-theme', 'dark'); localStorage.setItem('themeSwitch', 'dark'); } else { document.body.removeAttribute('data-theme'); localStorage.removeItem('themeSwitch'); } }; } }()); </script>

Опубликуйте страницу и все готово! Если что-то не получилось или есть вопросы пишите в Telegram @al_bogdan.

Лучшая благодарность – подпишитесь на мой телеграм-канал Design Fintech. Подобные штуки буду публиковать там.

#темнаятема #tilda

25
32 комментария
","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

Опубликуйте страницу и все готово! Если что-то не получилось или есть вопросы пишите в 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":1764941359,"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,"keywords":["000000","1b1b1b","333333","b1b1b1","f5f5f5","fcfcfc","ff035b","fff","ffffff","rec168746003","tilda","темнаятема"],"media":null,"customCover":null,"robotsTag":null,"categories":[],"isAnonymized":true}};