Темы

В SIMAI Framework реализована поддрежка светлой и темной темы на основе рекомендаций Material Design.

Использование темы

Для того чтобы использовать светлую тему, необходимо для контейнера задать класс .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-{цвет} - цвет границы
  • Насыщенность - необязательный параметр. Указывает степень прозрачности базового цвета. Может принимать следующие значения: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900. При этом сам базовый цвет имеет насыщенность 500.

Палитра светлой темы

Фон Граница Текст
.bg-theme-10
.b-theme-10
.c-theme-10
.bg-theme-20
.b-theme-20
.c-theme-20
.bg-theme-30
.b-theme-30
.c-theme-30
.bg-theme-40
.b-theme-40
.c-theme-40
.bg-theme-50
.b-theme-50
.c-theme-50
.bg-theme-60
.b-theme-60
.c-theme-60
.bg-theme-70
.b-theme-70
.c-theme-70
.bg-theme-80
.b-theme-80
.c-theme-80
.bg-theme-90
.b-theme-90
.c-theme-90
.bg-theme-100
.b-theme-100
.c-theme-100
.bg-theme-200
.b-theme-200
.c-theme-200
.bg-theme-300
.b-theme-300
.c-theme-300
.bg-theme-400
.b-theme-400
.c-theme-400
.bg-theme-500
.b-theme-500
.c-theme-500
.bg-theme-600
.b-theme-600
.c-theme-600
.bg-theme-700
.b-theme-700
.c-theme-700
.bg-theme-800
.b-theme-800
.c-theme-800
.bg-theme-900
.b-theme-900
.c-theme-900

Палитра темной темы

Фон Граница Текст
.bg-theme-10
.b-theme-10
.c-theme-10
.bg-theme-20
.b-theme-20
.c-theme-20
.bg-theme-30
.b-theme-30
.c-theme-30
.bg-theme-40
.b-theme-40
.c-theme-40
.bg-theme-50
.b-theme-50
.c-theme-50
.bg-theme-60
.b-theme-60
.c-theme-60
.bg-theme-70
.b-theme-70
.c-theme-70
.bg-theme-80
.b-theme-80
.c-theme-80
.bg-theme-90
.b-theme-90
.c-theme-90
.bg-theme-100
.b-theme-100
.c-theme-100
.bg-theme-200
.b-theme-200
.c-theme-200
.bg-theme-300
.b-theme-300
.c-theme-300
.bg-theme-400
.b-theme-400
.c-theme-400
.bg-theme-500
.b-theme-500
.c-theme-500
.bg-theme-600
.b-theme-600
.c-theme-600
.bg-theme-700
.b-theme-700
.c-theme-700
.bg-theme-800
.b-theme-800
.c-theme-800
.bg-theme-900
.b-theme-900
.c-theme-900

Изменение фона при наведении

Вы можете использовать класс .bg-theme-hover-{насыщенность} ,чтобы задавать изменение фона при наведении.

Светлая тема

.bg-theme-10
.bg-theme-20
.bg-theme-30
.bg-theme-40
.bg-theme-50
.bg-theme-60
.bg-theme-70
.bg-theme-80
.bg-theme-90
.bg-theme-100
.bg-theme-200
.bg-theme-300
.bg-theme-400
.bg-theme-500
.bg-theme-600
.bg-theme-700
.bg-theme-800
.bg-theme-900

Темная тема

.bg-theme-10
.bg-theme-20
.bg-theme-30
.bg-theme-40
.bg-theme-50
.bg-theme-60
.bg-theme-70
.bg-theme-80
.bg-theme-90
.bg-theme-100
.bg-theme-200
.bg-theme-300
.bg-theme-400
.bg-theme-500
.bg-theme-600
.bg-theme-700
.bg-theme-800
.bg-theme-900