Framework7 - Color Themes

Advertisements

Previous Page
Next Page  

Description

Framework7 provides different color themes for your applications.

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

S.No Theme Type & Description
1 iOS Theme Colors

You can use 10 different default iOS color themes for the application.
2 Material Theme Colors

Framework7 provides 22 different default material color themes for the application.

Applying Color Themes

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

Example

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

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

Example

   ...
</body>

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

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

Helper Classes

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

  • color-[color] − It can be used to change text color of block or color of button, link, 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.

Advertisements