framework7.angular/kitchen-sink-material/color-themes.html

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

<div data-page="color-themes" class="page" ng-controller="ColorThemes">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
      <div class="center">Color Themes</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p>Framework7 comes with 20 default Material color themes set and two layout color themes (default and dark):</p>
    </div>
    <div class="content-block-title">Choose Layout Theme</div>
    <div class="content-block">
      <div class="row">
        <div data-layout="" class="col-50 ks-layout-theme ks-layout-default active"></div>
        <div data-theme="dark" class="col-50 ks-layout-theme ks-layout-dark"></div>
      </div>
    </div>
    <div class="content-block-title">Choose Color Theme</div>
    <div class="content-block">
      <div class="row">
        <div data-theme="red" class="col-20 ks-color-theme bg-red"></div>
        <div data-theme="pink" class="col-20 ks-color-theme bg-pink"></div>
        <div data-theme="purple" class="col-20 ks-color-theme bg-purple"></div>
        <div data-theme="deeppurple" class="col-20 ks-color-theme bg-deeppurple"></div>
        <div data-theme="indigo" class="col-20 ks-color-theme bg-indigo"></div>
      </div>
      <div class="row">
        <div data-theme="blue" class="col-20 ks-color-theme bg-blue"></div>
        <div data-theme="lightblue" class="col-20 ks-color-theme bg-lightblue"></div>
        <div data-theme="cyan" class="col-20 ks-color-theme bg-cyan"></div>
        <div data-theme="teal" class="col-20 ks-color-theme bg-teal"></div>
        <div data-theme="green" class="col-20 ks-color-theme bg-green"></div>
      </div>
      <div class="row">
        <div data-theme="lightgreen" class="col-20 ks-color-theme bg-lightgreen"></div>
        <div data-theme="lime" class="col-20 ks-color-theme bg-lime"></div>
        <div data-theme="yellow" class="col-20 ks-color-theme bg-yellow"></div>
        <div data-theme="amber" class="col-20 ks-color-theme bg-amber"></div>
        <div data-theme="orange" class="col-20 ks-color-theme bg-orange"></div>
      </div>
      <div class="row">
        <div data-theme="deeporange" class="col-20 ks-color-theme bg-deeporange"></div>
        <div data-theme="brown" class="col-20 ks-color-theme bg-brown"></div>
        <div data-theme="gray" class="col-20 ks-color-theme bg-gray"></div>
        <div data-theme="bluegray" class="col-20 ks-color-theme bg-bluegray"></div>
        <div data-theme="black" class="col-20 ks-color-theme bg-black"></div>
      </div>
    </div>
  </div>
</div>