Популярное
Свежее
Моя лента
Сообщения
Рейтинг
Курсы
Темы
Маркетинг
Деньги
Сервисы
Личный опыт
Крипто
Маркетплейсы
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

2525
34 комментария
Иван Плотников

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

7
Ответить
Сергей Захаров

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

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

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

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

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

4
Ответить
Kirill Invictus

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

1
Ответить
Leha Shum

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

3
Ответить
Denis

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

Ответить