Темы
В SIMAI Framework реализована поддрежка светлой и темной темы.
Использование темы
Для того чтобы использовать светлую тему, необходимо для контейнера задать класс .theme-light для светлой и .theme-dark для темной.
В рамках заданной темы вы можете использовать следующие именные цвета:
.c-text-primary- цвет основного текста.c-text-secondary- цвет вспомогательного текста.c-text-hint- цвет незначительного текста.c-icon-active- цвет активной иконки.c-icon-inactive- цвет неактивной иконки.b-divider- цвет разделителя (границы)
В зависимости от темы цвета приобретают значения, которые свойственны для данной теме:
<section class="theme-light w-50 float-left">
<div class="p-5">
<p class="t-5 c-text-primary">Основной текст</p>
<p class="t-2 c-text-secondary">Вспомогательный текст</p>
<p class="t-1 c-text-hint">Незначительный текст</p>
<p class="t-1 c-icon-active"><i class="fa fa-sun" aria-hidden="true"></i> Активная иконка</p>
<p class="t-1 c-icon-inactive"><i class="fa fa-moon" aria-hidden="true"></i> Неактивная иконка</p>
<hr class="b-divider">
<a href="#" class="btn btn-theme btn-lg wave-light">Кнопка</a>
</div>
</section>
<section class="theme-dark w-50 float-left">
<div class="p-5">
<p class="t-5 c-text-primary">Основной текст</p>
<p class="t-2 c-text-secondary">Вспомогательный текст</p>
<p class="t-1 c-text-hint">Незначительный текст</p>
<p class="t-1 c-icon-active"><i class="fa fa-sun" aria-hidden="true"></i> Активная иконка</p>
<p class="t-1 c-icon-inactive"><i class="fa fa-moon" aria-hidden="true"></i> Неактивная иконка</p>
<hr class="b-divider">
<a href="#" class="btn btn-theme btn-lg wave-light">Кнопка</a>
</div>
</section>Цвет и тема
Так как тематические цвета основаны на черном и белом цветах с применением прозраности, то они хорошо смотрятся и на цветном фоне.
<section class="theme-light w-50 float-left bg-pink-50">
<div class="p-5">
<p class="t-5 c-text-primary">Основной текст</p>
<p class="t-2 c-text-secondary">Вспомогательный текст</p>
<p class="t-1 c-text-hint">Незначительный текст</p>
<p class="t-1 c-icon-active"><i class="fa fa-sun" aria-hidden="true"></i> Активная иконка</p>
<p class="t-1 c-icon-inactive"><i class="fa fa-moon" aria-hidden="true"></i> Неактивная иконка</p>
<hr class="b-divider">
<a href="#" class="btn btn-theme btn-lg wave-light">Кнопка</a>
</div>
</section>
<section class="theme-dark w-50 float-left bg-pink-900">
<div class="p-5">
<p class="t-5 c-text-primary">Основной текст</p>
<p class="t-2 c-text-secondary">Вспомогательный текст</p>
<p class="t-1 c-text-hint">Незначительный текст</p>
<p class="t-1 c-icon-active"><i class="fa fa-sun" aria-hidden="true"></i> Активная иконка</p>
<p class="t-1 c-icon-inactive"><i class="fa fa-moon" aria-hidden="true"></i> Неактивная иконка</p>
<hr class="b-divider">
<a href="#" class="btn btn-theme btn-lg wave-light">Кнопка</a>
</div>
</section>Палитра цветов темы
Для использования палитры тематических цветов укажите класс: .{префикс}-theme-{насыщенность}
- Префикс - обязательный параметр. Указывает к чему применяется цвет. Может принимать следующие значения:
.c-{цвет}- цвет текста.bg-{цвет}- цвет фона.b-{цвет}- цвет границы
- Насыщенность - необязательный параметр. Указывает степень прозрачности базового цвета. Может принимать значения от 1 до 9.
Палитра светлой темы
| Фон | Граница | Текст |
|---|---|---|
.bg-theme-1 |
.b-theme-1 |
.c-theme-1
|
.bg-theme-2 |
.b-theme-2 |
.c-theme-2
|
.bg-theme-3 |
.b-theme-3 |
.c-theme-3
|
.bg-theme-4 |
.b-theme-4 |
.c-theme-4
|
.bg-theme-5 |
.b-theme-5 |
.c-theme-5
|
.bg-theme-6 |
.b-theme-6 |
.c-theme-6
|
.bg-theme-7 |
.b-theme-7 |
.c-theme-7
|
.bg-theme-8 |
.b-theme-8 |
.c-theme-8
|
.bg-theme-9 |
.b-theme-9 |
.c-theme-9
|
Палитра темной темы
| Фон | Граница | Текст |
|---|---|---|
.bg-theme-1 |
.b-theme-1 |
.c-theme-1
|
.bg-theme-2 |
.b-theme-2 |
.c-theme-2
|
.bg-theme-3 |
.b-theme-3 |
.c-theme-3
|
.bg-theme-4 |
.b-theme-4 |
.c-theme-4
|
.bg-theme-5 |
.b-theme-5 |
.c-theme-5
|
.bg-theme-6 |
.b-theme-6 |
.c-theme-6
|
.bg-theme-7 |
.b-theme-7 |
.c-theme-7
|
.bg-theme-8 |
.b-theme-8 |
.c-theme-8
|
.bg-theme-9 |
.b-theme-9 |
.c-theme-9
|
Изменение фона при наведении
Вы можете использовать класс .hover:bg-theme-{насыщенность} ,чтобы задавать изменение фона при наведении.
Светлая тема
.hover:bg-theme-1
.hover:bg-theme-2
.hover:bg-theme-3
.hover:bg-theme-4
.hover:bg-theme-5
.hover:bg-theme-6
.hover:bg-theme-7
.hover:bg-theme-8
.hover:bg-theme-9
Темная тема
.hover:bg-theme-1
.hover:bg-theme-2
.hover:bg-theme-3
.hover:bg-theme-4
.hover:bg-theme-5
.hover:bg-theme-6
.hover:bg-theme-7
.hover:bg-theme-8
.hover:bg-theme-9