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>