Framework7 - Thèmes de couleurs

La description

Framework7 fournit différents thèmes de couleurs pour vos applications.

Un thème de couleur fournit différents types de couleurs de thème utilisées pour fonctionner avec les applications en douceur, comme spécifié dans le tableau ci-dessous -

S. Non	Type de thème et description
1	Couleurs du thème iOS Vous pouvez utiliser 10 thèmes de couleurs iOS par défaut différents pour l'application.
2	Couleurs du thème du matériau Framework7 fournit 22 thèmes de couleurs de matériaux par défaut différents pour l'application.

Application de thèmes de couleurs

Framework7 vous permet d'appliquer des thèmes de couleur sur différents éléments tels que la page, le bloc de liste, la barre de navigation, la ligne de boutons, etc. en utilisant la classe theme- [color] à l'élément parent.

Exemple

...
</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>

Thèmes de mise en page

Vous pouvez utiliser le thème de mise en page par défaut pour votre application en utilisant deux thèmes blanc et foncé . Les thèmes peuvent être appliqués en utilisant la classe layout- [theme] à l'élément parent.

Exemple

...
</body>

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

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

Classes d'assistance

Framework7 fournit des classes d'assistance supplémentaires, qui peuvent être utilisées en dehors ou sans thèmes comme indiqué ci-dessous -

• color-[color] - Il peut être utilisé pour changer la couleur du texte du bloc ou la couleur du bouton, lien, icône, etc.

• bg-[color] - Il définit la couleur d'arrière-plan prédéfinie sur le bloc ou l'élément.

• border-[color] - Il définit la couleur de bordure prédéfinie sur le bloc ou l'élément.