Framework7 - 颜色主题

---

描述

Framework7 为您的应用程序提供不同的颜色主题。

颜色主题提供了不同类型的主题颜色，用于顺利地与应用程序配合使用，如下表所示 -

应用颜色主题

Framework7 允许您通过使用父元素的theme-[color]类，将颜色主题应用于不同的元素，例如页面、列表块、导航栏、按钮行等。

例子

...
</body>

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

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

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

布局主题

您可以通过使用白色和深色两个主题来为应用程序使用默认布局主题。可以通过将layout-[theme]类应用到父元素来应用主题。

例子

   ...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

辅助类

Framework7 提供了额外的帮助器类，可以在外部或没有主题的情况下使用，如下所示 -

• color-[颜色] - 它可用于更改块的文本颜色或按钮、链接、图标等的颜色。

• bg-[color] - 它设置块或元素上的预定义背景颜色。

• border-[color] - 设置块或元素上的预定义边框颜色。