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" (iOS theme only) 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>