Framework7 comes with 10 ready to use default iOS color themes. But first of all, you need to include additional stylesheet to be able to use all these color themes:
<head> ... <link rel="stylesheet" href="path/to/framework7.ios.min.css"> <!-- It should be included After main Framework7 styles --> <link rel="stylesheet" href="path/to/framework7.ios.colors.min.css"> </head>
| gray | #8e8e93 | |
| white | #ffffff | |
| black | #000000 | |
| lightblue | #5ac8fa | |
| yellow | #ffcc00 | |
| orange | #ff9500 | |
| pink | #ff2d55 | |
| blue (default) | #007aff | |
| green | #4cd964 | |
| red | #ff3b30 |
Framework7 comes with 22 ready to use default Material color themes. And also, you need to include additional stylesheet to be able to use all these color themes:
<head> ... <link rel="stylesheet" href="path/to/framework7.material.min.css"> <!-- It should be included After main Framework7 styles --> <link rel="stylesheet" href="path/to/framework7.material.colors.min.css"> </head>
| red | #f44336 | |
| pink | #e91e63 | |
| purple | #9c27b0 | |
| deeppurple | #673ab7 | |
| indigo | #3f51b5 | |
| blue (default) | #2196f3 | |
| lightblue | #03a9f4 | |
| cyan | #00bcd4 | |
| teal | #009688 | |
| green | #4caf50 | |
| lightgreen | #8bc34a | |
| lime | #cddc39 | |
| yellow | #ffeb3b | |
| amber | #ffc107 | |
| orange | #ff9800 | |
| deeporange | #ff5722 | |
| brown | #795548 | |
| gray | #9e9e9e | |
| bluegray | #607d8b | |
| white | #ffffff | |
| black | #000000 |
It is easy to apply color themes. All you need is just to add theme-[color] class to the required parent element. It could be body, view, page, navbar, toolbar, list-block, etc. For example:
<body class="theme-red"> ... </body> <div class="page theme-green"> ... </div> <div class="list-block theme-pink"> ... </div> <div class="navbar theme-orange"> ... </div> <div class="buttons-row 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.
Framework7 also has 2 additional layout themes: "white" and "dark". To apply layout theme we need to add layout-[theme] class to the required parent element. It could be body, view, page, navbar, toolbar, list-block, etc. For example:
<body class="layout-dark"> ... </body> <div class="page layout-white"> ... </div> <div class="list-block layout-dark"> ... </div>
There are also additional helper classes that could be used without/outside themes:
color-[color] - if you want to change text color of required block, or change color of separate button, link or icon, for example:
<a class="button color-red">Red button</a> <i class="icon icon-back color-red">
bg-[color] - if you want quickly to set predefined background color on some block or element:
<span class="badge bg-pink">14</span> - pink badge
border-[color] - if you want to set predefined border color:
<div class="navbar border-white">...</div>
And of course, you can mix these helper classes:
<div class="navbar bg-lightblue color-white border-gray">...</div>
Note, that you can't use helper classes inside of container with theme classes. For example, this will have no effect:
<div class="theme-red"> <a href="#" class="color-blue">Link will be red, not blue</a> </div>