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

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

Шаг 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. Подобные штуки буду публиковать там.

0
32 комментария
Написать комментарий...
Иван Плотников

Насколько актуально в 2020 году верстать серьёзные проекты на Tilda? 

Ответить
Развернуть ветку
Сергей Захаров

Я вот дизайнер, который на тильде сделал сайт, зарабатывающий реальные деньги (бизнес не связан с дизайном). Мне не приходится по каждому чиху бежать к верстальщикам и прогерам что-то подправить и платить за это временем и деньгами. Это можно серьезным проектом назвать?

Ответить
Развернуть ветку
Иван Плотников

Серьезные в значении большие, масштабируемые

Ответить
Развернуть ветку
Сергей Захаров

Вы же не будете для выкапывания картошки использовать экскаватор? Больших и масштабируемых проектов не так уже и много, нежели простых сайтов или лендингов. У меня на проекте около 60 страниц (каталог). Полет нормальный. Сайт отлично индексируется и вносить изменения очень легко, я очень доволен платформой

Ответить
Развернуть ветку
Александр Львов

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

Ответить
Развернуть ветку
Альберт Алиев

Серьезные проекты верстают руками и сразу думают об оптимизации всех процессов на странице. А тильда удобная штука, но из-за огромного количества стилей и анимаций, подтормаживается.

Ответить
Развернуть ветку
Эдуард Богомаз

У сайта моей студии почти 80 страниц на Тильда. Супербыстрые правки. Супербыстрая верстка. Суперудобно. Оборот студии - много Лямов в год. Серьёзный проект?

Ответить
Развернуть ветку
Invictus Domini

Расскажите пожалуйста, какие проекты на Ваш взгляд считаются серьёзными и почему  Тильда не подходит для их реализации?

Ответить
Развернуть ветку
Gena Popov

Форум? Чат? Соц сеть? Биржа? Каталог товаров? ИМХО тильда для лендингов

Ответить
Развернуть ветку
Invictus Domini

Я спрашивал не Вас, но благодарю за ответ. Согласен, что для создания социальной сети и биржи Тильда вряд ли подходит. А вот для каталога товаров и, например, интернет-магазина вполне годится. Равно как и для создания многостраничного сайта компании.

Ответить
Развернуть ветку
Марк Ригер

Вопрос даже не в серьезности, а в функционале под ряд задачи Тильда очень ограничена в плане изменений настроек внутри себя и работы с данными. Примеры:
1. Если есть потребность переодически менять определенные платежные настройки - для этого нет API(как и для других настроек).
2. Нет возможности отдельно получить список "Заявок из формы" по API. Только если "копить" у себя на WebHook.
3. Это скорее баг: невозможно качественно отслеживать незавершенные заявки программно. Можно поставить галочку в настройках аля "Получать информацию об любых платежах", после заявка об начале платежа пользователем поступит на WebHook и всё(!). Если он даже оплатит - отдельное оповещение не придёт. И нет метода типа "getLead" чтобы проверить была ли оплата.

Ответить
Развернуть ветку
Leha Shum

Круто, пусть Тильда введёт это сама)

Ответить
Развернуть ветку
Denis

Тильда вообще нормальный конструктор или есть лучше ? Пытаюсь сейчас сайт на нем делать. Но уже проблемка, хедер не перекрашивается, что только не делал.

Ответить
Развернуть ветку
Миша Кудымов

Хороший конструктор, особенно для лендосов одностраничных

Ответить
Развернуть ветку
Богдан Алексеев
Автор

Инструмент огонь! Вы пытаетесь темную тему сделать и хедер не перекрашивается при переключении? 

Ответить
Развернуть ветку
Alexander Sinyakov

попробуйте посмотреть на редактор Nicepage.  Быстрый, делает чистую верстуку, поддерживает создание совеменных дизайнов.  

Ответить
Развернуть ветку
Богдан Алексеев
Автор

На все 100% актуально. А почему-бы и нет? Я могу понять, что high-load проекты не делаются на тильде, когда нужна субд и тд, и тп.

Ответить
Развернуть ветку
i h8ers

Хоспади! Да ты программист!!!

Ответить
Развернуть ветку
Дмитрий Костенко

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

Ответить
Развернуть ветку
Богдан Алексеев
Автор
Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Богдан Алексеев
Автор

Там ограничение только на страницы. Ограничений по контенту нет. Только техническое на 5000 постов

Ответить
Развернуть ветку
Миша Кудымов

Поехал немного сайт

Ответить
Развернуть ветку
Богдан Алексеев
Автор

Спасибо! Какой девайс и браузер?

Ответить
Развернуть ветку
Миша Кудымов

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

Ответить
Развернуть ветку
Игорь Деревягин

у меня тоже
Chrome Версия 80.0.3987.132
дисплей FullHD

у блоков #rec168582198 .t396__artboard появилось свойство overflow-y: scroll? если его убрать, то норм становится

Ответить
Развернуть ветку
Богдан Алексеев
Автор

Спасибо за фидбек! Да, там в боковом меню будут еще разделы, поэтому там нужен скролл. Надо поработать над адаптивностью, так как там позиционирование в пикселях стоит, а по-хорошему надо в процентах.

Ответить
Развернуть ветку
Миша Кудымов

Хром, версия 80.0.3987.132  

Ответить
Развернуть ветку
Миша Кудымов

Хром, версия 80.0.3987.132

Ответить
Развернуть ветку
Vlad Korobov

Крутяк, спасибо за статью!

Ответить
Развернуть ветку
мангака твоих снов

Спасибо за статью! Присматриваюсь к тильде.

Заметил одну вещь, в FireFox на Win 10 едет переключатель. Фиксится скрытием инпута через display: none.

Ответить
Развернуть ветку
Богдан Алексеев
Автор

Спасибо! Поправлю)

Ответить
Развернуть ветку
29 комментариев
Раскрывать всегда