Темы

В 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