Color Themes

Framework7 comes with 9 ready to use default color themes. Note that colors a bit vary for iOS and MD themes to match official guide lines.

It is easy to apply color themes. All you need is just to add class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:

Framework7 also has additional dark theme layout. To apply dark theme we need to add theme-dark class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:

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

There are also additional helper classes that could be used without/outside color themes:

**text-color-[color]** - if you want to change text color of required element:
```
<p class="text-color-red">Red color text</p>
```
**bg-color-[color]** - if you want quickly to set predefined background color on some block or element:

And of course, you can mix these helper classes: