Как сделать темную тему на 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.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Богдан Алексеев", "author_type": "self", "tags": ["\u0442\u0435\u043c\u043d\u0430\u044f\u0442\u0435\u043c\u0430","tilda","rec168746003","ffffff","fff","ff035b","fcfcfc","f5f5f5","b1b1b1","333333","1b1b1b","000000"], "comments": 32, "likes": 21, "favorites": 133, "is_advertisement": false, "subsite_label": "design", "id": 112476, "is_wide": true, "is_ugc": true, "date": "Sun, 15 Mar 2020 14:10:27 +0300", "is_special": false }
0
32 комментария
Популярные
По порядку
Написать комментарий...
–2

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

Ответить
13

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

Ответить
0

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

Ответить
10

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

Ответить
3

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

Ответить
2

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
2

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

Ответить
0

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

Ответить
3

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
0

круто сделано, но ведь там чёртово ограничение на 500 страниц. Как обходить будете по количеству контента?

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить

Прямой эфир