Framework7 v2
Support Framework7
stars forks
iOSAndroid
Improve this Doc

Color Themes

Framework7 comes with 9 ready to use default color themes. Note that colors a bit vary for iOS and MD themes to match official guide lines.

Color iOS MD
red
#ff3b30
#f44336
green
#4cd964
#4caf50
blue
#007aff
#2196f3
pink
#e91e63
#e91e63
yellow
#ffcc00
#ffeb3b
orange
#ff9500
#ff9800
gray
#8e8e93
#9e9e9e
white
#fff
#fff
black
#000
#000

Apply Color Themes

It is easy to apply color themes. All you need is just to add color-theme-[color] class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:

<body class="color-theme-red">
    ...
</body>

<div class="page color-theme-green">
    ...
</div>

<div class="list-block color-theme-pink">
    ...
</div>

<div class="navbar color-theme-orange">
    ...
</div>

<div class="segmented color-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 additional dark theme layout. To apply dark theme we need to add theme-dark class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:

<body class="theme-dark">
    ...
</body>

<div class="page theme-dark">
    ...
</div>

<div class="list-block theme-dark">
    ...
</div>

Helper Classes

There are also additional helper classes that could be used without/outside color themes:

  • color-[color] - if you want to change color of individual button, link or icon, for example:

    <a class="button color-red">Red button</a>

  • text-color-[color] - if you want to change text color of required element:

    <p class="text-color-red">Red color text</p>

  • bg-color-[color] - if you want quickly to set predefined background color on some block or element:

    <span class="badge bg-color-pink">14</span> - pink badge

  • border-color-[color] - if you want to set predefined border color:

    <div class="button border-color-red">...</div>

And of course, you can mix these helper classes:

<div class="navbar bg-color-blue text-color-white border-color-gray">...</div>