Temas

Ignite UI for Angular permite que você modifique os estilos de todos os temas de componentes usando variáveis CSS. Se você realmente quiser se aprofundar, nós fornecemos um poderoso mecanismo de temas Sass que permite que você crie temas de componentes globais adaptados à sua linguagem de design específica que funcionam em todos os navegadores modernos.

Note

Este documento descreve o sistema de temas no Ignite UI for Angular da versão 12 em diante. A partir da versão 12, as variáveis CSS são a maneira recomendada de modificar os temas globais e de componentes. Você ainda pode usar a biblioteca de temas Sass como faria antes da versão 12.

Basic Usage

Ignite UI for Angular inclui os seguintes temas como parte de seu pacote:

• Material
• Bootstrap
• Fluente
• Anil

Todos os temas possuem variantes claras e escuras, além de suporte por padrão para conteúdo da esquerda para a direita (LTR) e da direita para a esquerda (RTL). A maneira mais fácil de começar a usar qualquer um dos temas incluídos na sua aplicação é especificando o caminho para um arquivo de tema CSS na suaangular.json configuração. Por exemplo, se você quiser usar o tema Dark Material, incluiria o caminho para o arquivo de tema assim:

"styles": [
  "node_modules/igniteui-angular/styles/igniteui-angular-dark.css",
  "src/styles.css"
]

Note

Se você instalou o pacote Ignite UI for Angular usandong add igniteui-angular, deve ter notado que já adicionamosigniteui-angular.css ao array de estilos.

Aqui está a lista completa de temas incluídos na pasta de estilos:

Nome do tema	Caminho
Luz material	node_modules/igniteui-angular/styles/igniteui-angular.css
Material Escuro	node_modules/igniteui-angular/styles/igniteui-angular-dark.css
Luz de inicialização	node_modules/igniteui-angular/styles/igniteui-bootstrap-light.css
Bootstrap escuro	node_modules/igniteui-angular/styles/igniteui-bootstrap-dark.css
Material Verde Escuro	node_modules/igniteui-angular/styles/igniteui-dark-green.css
Luz Fluente	node_modules/igniteui-angular/styles/igniteui-fluent-light.css
Fluente Escuro	node_modules/igniteui-angular/styles/igniteui-fluent-dark.css
Fluente Luz Excel	node_modules/igniteui-angular/styles/igniteui-fluent-light-excel.css
Excel escuro fluente	node_modules/igniteui-angular/styles/igniteui-fluent-dark-excel.css
Palavra de Luz Fluente	node_modules/igniteui-angular/styles/igniteui-fluent-light-word.css
Palavra Escura Fluente	node_modules/igniteui-angular/styles/igniteui-fluent-dark-word.css
Luz Índigo	node_modules/igniteui-angular/styles/igniteui-indigo-light.css
Índigo Escuro	node_modules/igniteui-angular/styles/igniteui-indigo-dark.css

Como você pode ver, nós lançamos Ignite UI for Angular com uma quantidade substancial de temas.

Mas isso não é o fim da nossa história de tematizado. Todos os temas são compilados do código-fonte Sass e construídos usando nosso poderoso motor de tematizado. Esse motor contém Sassmixins efunctions muitos dos quais são expostos publicamente, o que permite redesenhar completamente todos os componentes da sua aplicação.

Se Sass não é sua praia, tudo bem, facilitamos a modificação dos temas compilados usando propriedades CSS personalizadas, ou também conhecidas como variáveis CSS. Você ainda pode usar Sass em combinação com variáveis CSS.

Global Variables

Se você inspecionar qualquer um dos temas CSS acima, notará que há várias variáveis CSS incluídas no:root escopo; Incluímos variáveis paracolors,shadows,typography, econfiguration. Modificar qualquer uma dessas variáveis permitirá que você personalize a aparência geral do tema e, por outro lado, os componentes.

O que a maioria das pessoas procura ao modificar um tema é alterar as cores padrão usadas pelos componentes.

Se você quiser mudar as cores primária e secundária, tudo o que precisa fazer é digitar o seguinte no seustyles.css arquivo:

/* styles.css */
:root {
  --ig-primary-500: #09f;
  --ig-secondary-500: red;
  --ig-surface-500: rgb(221 211 211);
}

Vamos analisar os nomes dessas variáveis de cor. Oig prefixo está presente como um identificador único para indicar que essa variável faz parte de um tema Ignite UI for Angular,primary é o nome da variável de cor e500 representa a variante de cor. Vamos analisar mais a fundo as paletas na seção Palettes da documentação. Por enquanto, tudo o que você precisa saber é que temos várias variáveis de cor base (primária, secundária, de superfície, sucesso, informação, etc.) que incluem diferentes tons ou variantes, todas geradas a partir das variantes de cor principal. As500 variantes de cor que definimos no exemplo acima são consideradas a cor principal da variável e todas as outras variantes para a variável de cor dada são geradas a partir da500 variante.

Alterando essas variantes, você pode reformular completamente toda a paleta.

Warning

Alguns componentes não usam cores das paletas. Nesses casos, você terá que direcionar as variáveis CSS do componente diretamente para modificar suas cores. Para descobrir quais cores de paleta são usadas por qual componente, dê uma olhada na Documentação de Componentes.

Da mesma forma, mudar aselevations sombras é tão fácil quanto. Incluímos 25 níveis de elevação (0-24). Aqui está uma versão simplificada de como essas variáveis se parecem:

/* styles.css */
:root {
  --ig-elevation-0: none;
  --ig-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.26),
                    0 1px 1px 0 rgba(0, 0, 0, 0.12),
                    0 2px 1px -1px rgba(0, 0, 0, 0.08);
  /* ... */
  --ig-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, 0.26),
                  0 24px 38px 3px rgba(0, 0, 0, 0.12),
                  0 9px 46px 8px rgba(0, 0, 0, 0.08);
}

Essas são essencialmente declarações CSSbox-shadow empilhadas. Você pode substituí-los por qualquer outro valor válidobox-shadow. Quanto maior o número de nível de elevação, maior é a sombra. Novamente, diferentes componentes usam diferentes níveis de elevação; para descobrir quais níveis de elevação são usados por qual componente, consulte a Documentação de Componentes. Vamos analisar mais a fundo as elevações nas Elevações da documentação.

Configuração

Existem diversas variáveis que permitem configurar o comportamento global do tema:

Redondeza

Para configurar o fator de raio de todos os componentes, você pode alterar o valor da--ig-radius-factor variável. O valor padrão é 1, o que significa que o fator de raio padrão é usado entre os temas componentes.

Exemplo:

/* Makes all components appear blocky in shape */
:root {
  --ig-radius-factor: 0;
}

Elevation Factor

Para configurar o fator de elevação de todos os componentes, você pode alterar o valor da--ig-elevation-factor variável. O valor padrão é 1, o que significa que as elevações padrão são usadas entre os temas componentes.

Exemplo:

/* Makes all components appear flat (no-shadows) */
:root {
  --ig-elevation-factor: 0;
}

Component Variables

Todos os componentes oferecem a capacidade de modificar seus temas usando variáveis CSS específicas de cada componente. Cada componente expõe duas variáveis que modificam a mesma propriedade. As variáveis expostas podem ser consideradas comoglobal e.local Ambos modificam o tema do componente da mesma forma, a única diferença é queglobal as variáveis têm oigx-[component-name] prefixo associado ao nome da variável e podem ser usadas pelos seletores pais para estilizar componentes filhos, enquantolocal variáveis são específicas de uma instância de componente.

Vamos dar uma olhada em um exemplo. Digamos que você queira modificar o plano de fundo do avatar. O avatar procura pelas seguintes variáveis CSS que modificam seu plano de fundo:

/* styles.css */
:root {
  --igx-avatar-background: black;
}

igx-avatar {
  --background: orange;
}

O snippet acima definirá o fundo de todos os avatares para laranja.

O componente avatar procurará a--background variável primeiro. Se explicitamente definido, ele terá seu valor. Em outras palavras,local variáveis têm prioridade maior e só funcionarão se forem aplicadas diretamente aoigx-avatar seletor, seja usando seu seletor de tags ou qualquer outro seletor que tenhaigx-avatar como alvo. O global--igx-avatar-background pode ser considerado como uma variável de recurso. Ele só será usado se o local--background não for explicitamente sobreposto.

Para os curiosos, veja como isso é implementado internamente no avatar:

igx-avatar {
  --background: var(--igx-avatar-background, var(--ig-gray-400));
  background: var(--background);
}

Geralmente, você usaria variáveis globais quando quisesse aplicar alterações a todas as instâncias de um componente, enquanto as variáveis locais têm como alvo instâncias específicas do componente e sempre substituirão a variável global.

Aqui está outro exemplo:

<!-- app.component.html -->
<igx-avatar>AB</igx-avatar>
<igx-avatar>CD</igx-avatar>
<app-contacts></app-contacts>

<!-- contacts.component.html -->
<igx-avatar>EF</igx-avatar>
<igx-avatar>GH</igx-avatar>

/* styles.css */
:root {
  --igx-avatar-background: lavender;
}

/* contacts.component.css */
igx-avatar {
  --background: purple;
}

AvataresAB eCD usarão a cor lavanda definida globalmente como fundo, enquanto avataresEF terãoGH fundos roxos.

Cada componente tem todas as suas propriedades temáticas documentadas na seção de estilo da documentação do componente.

Isso deve ser tudo o que você precisa para começar a criar temas. Você pode modificar as cores da paleta global, elevações e alterar as propriedades do tema do componente criando temas de componentes globais e locais. Se quiser saber mais, temos uma documentação abrangente que abrange tópicos como Paletas, Elevações, Tipografia e Tematização com Sass em detalhes.

Additional Resources

Tópicos relacionados:

• Paletas
• Elevações
• Tipografia
• Tematização com Sass

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub