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:
?
| 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:
?
| 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:
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:
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:
bg-[color]?- if you want quickly to set predefined background color on some block or element:
border-[color]?- if you want to set predefined border color:
And of course, you can mix these helper classes:
Note, that you can‘t use helper classes inside of container with theme classes. For example, this will have no effect:
?
移动端安卓和IOS开发框架Framework7教程-Color Themes
原文：http://zaixianshouce.iteye.com/blog/2307006