颜色主题（Color Themes）

描述 (Description)

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

颜色主题提供了不同类型的主题颜色，用于平滑地处理应用程序，如下表所示 -

应用色彩主题

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

例子 (Example)

...
</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>

布局主题

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

例子 (Example)

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

助手课程

Framework7提供了额外的帮助程序类，可以在外部使用或不使用主题，如下所示 -

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

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

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