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 têm variantes claras e escuras, bem como suporte para conteúdo da esquerda para a direita (LTR) e da direita para a esquerda (RTL) por padrão. A maneira mais fácil de começar a usar qualquer um dos temas agrupados em seu aplicativo é especificando o caminho para um arquivo de tema CSS em sua configuração angular.json. Por exemplo, se você quisesse usar o tema Material escuro, você 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 usando ng add igniteui-angular, você deve ter notado que já adicionamos igniteui-angular.css ao array styles.

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 este não é o fim da nossa história de temas. Todos os temas são compilados a partir do código-fonte Sass e são construídos usando nosso poderoso mecanismo de temas. Este mecanismo contém mixins e functions Sass, muitos dos quais são expostos publicamente, o que permite que você redesenhe completamente todos os componentes em seu aplicativo.

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á algumas variáveis CSS incluídas no escopo:root; Incluímos variáveis para colors, shadows, typography e configuration. Modificar qualquer uma dessas variáveis permitirá que você personalize a aparência geral do tema e, inversamente, dos componentes.

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

Se você quiser alterar as cores primárias e secundárias, tudo o que você precisa fazer é digitar o seguinte no seu arquivo styles.css:

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

Vamos decompor os nomes dessas variáveis de cor. O prefixo ig está lá como um identificador exclusivo para indicar que essa variável faz parte de um tema Ignite UI for Angular, primary é o nome da variável de cor e 500 representa a variante de cor. Daremos uma olhada mais profunda nas paletas na seção Paletas da documentação. Por enquanto, tudo o que você precisa saber é que temos várias variáveis de cor base (primary, secondary, surface, success, info, etc.) que incluem diferentes tons ou variantes que são todas geradas a partir das variantes de cor principais. As 500 variantes de cor que definimos no exemplo acima são consideradas a cor da variável principal e todas as outras variantes para a variável de cor fornecida são geradas a partir da variante 500.

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 as elevations (sombras) é igualmente fácil. 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 box-shadow CSS empilhadas. Você pode substituí-las por qualquer outro valor box-shadow válido. Quanto maior o número do 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, dê uma olhada na Documentação de Componentes. Daremos uma olhada mais profunda nas 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 variável--ig-radius-factor. O valor padrão é 1, o que significa que o fator de raio padrão é usado em todos os temas de componentes.

Exemplo:

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

Fator de elevação

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

Exemplo:

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

Component Variables

Todos os componentes fornecem a capacidade de modificar seus temas usando variáveis CSS específicas do componente. Cada componente expõe duas variáveis que modificam a mesma propriedade. As variáveis expostas podem ser consideradas global e local. Ambas modificam o tema do componente da mesma forma, a única diferença é que as variáveis global têm o prefixo igx-[component-name] anexado ao nome da variável e podem ser usadas de seletores pai para estilizar componentes filho, enquanto as variáveis local são específicas para uma instância do 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 variável--background primeiro. Se explicitamente definida, ela pegará seu valor. Em outras palavras, variáveis local têm prioridade mais alta e funcionarão somente se aplicadas diretamente ao igx-avatar, seja usando seu seletor de tag ou qualquer outro seletor que tenha como alvo igx-avatar. A--igx-avatar-background global pode ser considerada uma variável de fallback. Ela será usada somente se a--background local não for explicitamente substituída.

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;
}

Os avatares AB e CD usarão a cor lavanda definida globalmente como plano de fundo, enquanto os avatares EF e GH terão 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