Framework7 - Color Themes

Description

Framework7 provides different color themes for your apppcations.

A color theme provides different types of theme colors used to work with the apppcations smoothly as specified in the table below −

Applying Color Themes

Framework7 allows you to apply color themes on different elements such as page, pst-block, navbar, buttons-row etc by using the theme-[color] class to the parent element.

Example

...
</body>

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

<span class = "pst-block theme-blue">
   ...
</span>

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

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

Layout Themes

You can use default layout theme for your apppcation by using two themes white and dark. The themes can be appped by using the layout-[theme] class to the parent element.

Example

   ...
</body>

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

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

Helper Classes

Framework7 provides additional helper classes, which can be used outside or without themes as psted below −

color-[color] − It can be used to change text color of block or color of button, pnk, icon etc.

bg-[color] − It sets the predefined background color on the block or element.

border-[color] − It sets the predefined border color on the block or element.