.page(data-page="color-themes")
  .navbar
    .navbar-inner
      .left
        a(href="index.html").back.link.icon-only
          i.icon.icon-back
      .center Color Themes
      .right
        a(href="#").open-panel.link.icon-only
          i.icon.icon-bars
  .page-content
    .content-block
      p Framework7 comes with 20 default Material color themes set and two layout color themes (default and dark):
    .content-block-title Choose Layout Theme
    .content-block
      .row
        .col-50.ks-layout-theme.ks-layout-default.active(data-layout="")
        .col-50.ks-layout-theme.ks-layout-dark(data-theme="dark")
    .content-block-title Choose Color Theme
    .content-block
      .row
        .col-20.ks-color-theme.bg-red(data-theme="red")
        .col-20.ks-color-theme.bg-pink(data-theme="pink")
        .col-20.ks-color-theme.bg-purple(data-theme="purple")
        .col-20.ks-color-theme.bg-deeppurple(data-theme="deeppurple")
        .col-20.ks-color-theme.bg-indigo(data-theme="indigo")
      .row
        .col-20.ks-color-theme.bg-blue(data-theme="blue")
        .col-20.ks-color-theme.bg-lightblue(data-theme="lightblue")
        .col-20.ks-color-theme.bg-cyan(data-theme="cyan")
        .col-20.ks-color-theme.bg-teal(data-theme="teal")
        .col-20.ks-color-theme.bg-green(data-theme="green")

      .row
        .col-20.ks-color-theme.bg-lightgreen(data-theme="lightgreen")
        .col-20.ks-color-theme.bg-lime(data-theme="lime")
        .col-20.ks-color-theme.bg-yellow(data-theme="yellow")
        .col-20.ks-color-theme.bg-amber(data-theme="amber")
        .col-20.ks-color-theme.bg-orange(data-theme="orange")
      .row
        .col-20.ks-color-theme.bg-deeporange(data-theme="deeporange")
        .col-20.ks-color-theme.bg-brown(data-theme="brown")
        .col-20.ks-color-theme.bg-gray(data-theme="gray")
        .col-20.ks-color-theme.bg-bluegray(data-theme="bluegray")
        .col-20.ks-color-theme.bg-black(data-theme="black")