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.
Color | iOS | MD |
---|---|---|
red | #ff3b30 | #f44336 |
green | #4cd964 | #4caf50 |
blue | #007aff | #2196f3 |
pink | #e91e63 | #e91e63 |
yellow | #ffcc00 | #ffeb3b |
orange | #ff9500 | #ff9800 |
gray | #8e8e93 | #9e9e9e |
white | #fff | #fff |
black | #000 | #000 |
Apply Color Themes
It is easy to apply color themes. All you need is just to add color-theme-[color]
class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:
<body class="color-theme-red">
...
</body>
<div class="page color-theme-green">
...
</div>
<div class="list-block color-theme-pink">
...
</div>
<div class="navbar color-theme-orange">
...
</div>
<div class="segmented color-theme-yellow">
...
</div>
Note, that applied color theme affects only interractive elements such as links, buttons, form elements, icons. It doesn’t change basic text color or background colors on other blocks.
Layout Themes
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 class="page theme-dark">
...
</div>
<div class="list-block theme-dark">
...
</div>
Helper Classes
There are also additional helper classes that could be used without/outside color themes:
**color-[color]**
- if you want to change color of individual button, link or icon, for example:<a class="button color-red">Red button</a>
**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:<span class="badge bg-color-pink">14</span> - pink badge
**border-color-[color]**
- if you want to set predefined border color:<div class="button border-color-red">...</div>
And of course, you can mix these helper classes:
<div class="navbar bg-color-blue text-color-white border-color-gray">...</div>