Тема — это общий дизайн и оформление вашего сайта. Темы определяют, где и как на сайте будут отображаться кнопки, меню и другие виджеты. Тема определяет цветовую схему, шрифты, размеры, отступы и другие характеристики дизайна.
Для одного сайта может быть несколько тем. Иногда тема задаётся по умолчанию, а бывает, что тему выбирает пользователь, а может быть так, что тема зависит от настроек операционной системы.
Обычная тема для сайта
Брендированная тема для сайта
Тёмная тема для сайта
Объёмная тема для сайта
Если разбирать тему в терминологии БЭМ-а, то тема — это внешний вид блока, а значит будет задаваться как базовый класс и его модификатор. В базовом классе определяются параметры цветов, типографики и отступов по умолчанию. А класс модификатора состоит из специфических свойств темы: особенный цвет, особенное декоративное оформление, особенные размеры, отступы и так далее.
Можно миксовать тему к самому внешнему блоку, например, body:
.theme {
/* настройки по умолчанию */
}
.theme--color-brand {
/* брендовые цвета текста */
color: #6e90e6;
/* брендовые цвета фона */
background-color: #e2e9fc;
...
}
Тема может применяться и к отдельному блоку. К примеру, так:
<section class="features">
<h2 class="features__title">Тема по умолчанию</h2>
<p class="features__description">Это первая тема, с которой сталкивается пользователь, когда откроет ваш сайт.</p>
</section>
...
<section class="features container theme theme--dark">
<h2 class="features__title">Переходим на тёмную сторону!</h2>
<p class="features__description">Тёмная тема в дизайне интерфейсов к 2020 году стала чуть ли не обязательной. Вслед за Apple и Android на поезд Dark Mode «впрыгнули» и другие крупнейшие игроки рынка: Google, What’s App, Instagram.</p>
</section>
.theme {
/* настройки по умолчанию */
}
.theme--dark {
/* цвета текста для тёмной темы */
/* цвета фона для тёмной темы */
}
Раздел с обычным оформлением и раздел с тёмной темой
Чтобы гибко управлять темами, лучше поделить их по функциональности свойств: цвет, шрифт, отступы, размеры и другие. Получается, что тема будет состоять из нескольких маленьких тем. Эти мини темы можно менять независимо друг от друга, допустим, изменить цвет, не трогая типографику и отступы.
.theme {
/* настройки по умолчанию */
}
.theme--color-inverse {
/* цвета текста для инверсной (или тёмной) темы */
color: black;
/* цвета фона для инверсной (или тёмной) темы */
background-color: white;
}
.theme--space-default {
/* отступы для ритма внутри сеток */
padding: 16px;
}
.theme--size-default {
/* размеры в текстовых блоках */
/* размер текста */
font-size: 14px;
/* межстрочный интервал */
line-height: 1.6;
}
.theme--gap-medium {
/* расстояния между колонками и строками сетки */
/* отступы между столбцами и строками */
gap: 30px;
/* или внешние отступы */
margin-right: 30px;
margin-bottom: 30px;
}
