iOS Theme Colors
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 |
Material Theme Colors
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 |
Apply Color Themes
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.
Layout Themes
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>
Helper Classes
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>