Темы оформления
theme
В SIMAI Framework реализована поддрежка светлой и темной темы.
Использование темы
Для того чтобы использовать светлую тему, необходимо для контейнера задать класс .theme-light для светлой и .theme-dark для темной.
В рамках заданной темы вы можете использовать следующие именные цвета:
.color-primary- цвет основного текста.color-secondary- цвет вспомогательного текста.color-hint- цвет незначительного текста.c-icon-active- цвет активной иконки.c-icon-inactive- цвет неактивной иконки.b-divider- цвет разделителя (границы)
В зависимости от темы цвета приобретают значения, которые свойственны для данной теме:
<div class="theme-light ..."></div>
<div class="theme-dark ..."></div>Цвет и тема
Так как тематические цвета основаны на черном и белом цветах с применением прозраности, то они хорошо смотрятся и на цветном фоне.
<section class="theme-light bg-pink-50"></section>Палитра цветов темы
Для использования палитры тематических цветов укажите класс: .{префикс}-theme-{насыщенность}
- Префикс - обязательный параметр. Указывает к чему применяется цвет. Может принимать следующие значения:
.color-{цвет}- цвет текста.bg-{цвет}- цвет фона.border-{цвет}- цвет границы
- Насыщенность - необязательный параметр. Указывает степень прозрачности базового цвета. Может принимать значения от 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