Framework7 — Цветовые темы

Framework7 предоставляет различные цветовые темы для ваших приложений.

Цветовая тема предоставляет различные типы цветов темы, используемые для плавной работы с приложениями, как указано в таблице ниже —

Для приложения вы можете использовать 10 различных цветовых тем iOS по умолчанию.

Framework7 предоставляет 22 различных цветовых темы материала по умолчанию для приложения.

Применение цветовых тем

Framework7 позволяет применять цветовые темы к различным элементам, таким как страница, список-блок, панель навигации, ряд кнопок и т. Д., Используя класс theme- [color] для родительского элемента.

пример

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

Темы макетов

Вы можете использовать тему макета по умолчанию для вашего приложения, используя две темы: белую и темную . Темы можно применить с помощью класса layout- [theme] к родительскому элементу.

пример

   ...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

Вспомогательные классы

Framework7 предоставляет дополнительные вспомогательные классы, которые могут использоваться вне или без тем, как указано ниже —

color- [color] — может использоваться для изменения цвета текста блока или цвета кнопки, ссылки, значка и т. д.

bg- [color] — устанавливает предопределенный цвет фона для блока или элемента.

border- [color] — устанавливает предопределенный цвет границы для блока или элемента.