Color Themes

优质

小牛编辑

126浏览

2023-12-01

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>