Framework7 - Temas de cores

Descrição

Framework7 fornece diferentes temas de cores para seus aplicativos.

Um tema de cores fornece diferentes tipos de cores de tema usadas para trabalhar com os aplicativos sem problemas, conforme especificado na tabela abaixo -

S.No Tipo e descrição do tema
1 iOS Theme Colors

Você pode usar 10 diferentes temas de cores padrão do iOS para o aplicativo.

2 Cores do tema do material

Framework7 fornece 22 temas de cores de materiais padrão diferentes para o aplicativo.

Aplicando Temas de Cores

O Framework7 permite que você aplique temas de cores em diferentes elementos, como página, bloco de lista, barra de navegação, linha de botões, etc., usando a classe theme- [color] para o elemento pai.

Exemplo

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

Temas de layout

Você pode usar o tema de layout padrão para seu aplicativo usando dois temas branco e escuro . Os temas podem ser aplicados usando a classe layout- [theme] para o elemento pai.

Exemplo

...
</body>

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

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

Aulas auxiliares

Framework7 fornece classes auxiliares adicionais, que podem ser usadas fora ou sem os temas listados abaixo -

  • color-[color] - Pode ser usado para alterar a cor do texto do bloco ou a cor do botão, link, ícone etc.

  • bg-[color] - Define a cor de fundo predefinida no bloco ou elemento.

  • border-[color] - Define a cor da borda predefinida no bloco ou elemento.