Temas Globais

    O tema global permite que você gere rapidamente um tema que usa sua paleta de cores, esquema e elevações personalizados. A paleta de cores, esquema e elevações serão propagados para todos os componentes que não têm temas personalizados criados para eles.

    Visão geral

    Se você incluiu o arquivo igniteui-angular.css no seu projeto de aplicativo, agora é um bom momento para removê-lo. Usaremos nosso próprio arquivo my-app-theme.scss para gerar um tema global para todos os componentes em nosso aplicativo.

    Ignite UI for Angular usa um tema global por padrão para tematizar todo o conjunto de componentes. No entanto, você pode criar temas com escopo para componentes que você tem em seu aplicativo, dependendo do seu caso de uso. Por enquanto, incluiremos todos os nossos temas em um único arquivo. Para gerar um tema global, incluiremos dois mixins core e theme. Ambos os mixins aceitam alguns argumentos:

    Core mixin

    Nome Tipo Padrão Descrição
    $print-layout booleano verdadeiro Incluir/excluir os estilos para impressão.
    $enhanced-accessibility booleano falso Alterna as cores dos componentes e outras propriedades para valores mais acessíveis.

    Theme mixins

    Nome Tipo Padrão Descrição
    $palette mapa null O mapa de paletas a ser usado pelos temas padrão de todos os componentes.
    $schema mapa $light-material-schema O esquema usado como base para estilizar os componentes.
    $exclude lista () Uma lista de temas de componentes a serem excluídos do tema global.
    $roundness Número null Define o fator de arredondamento global para todos os componentes (o valor pode ser qualquer fração decimal entre 0 e 1).
    $elevation booleano true Liga/desliga elevações para todos os componentes do tema.
    $elevations Mapa $material-elevations O mapa de elevação a ser usado por todos os temas componentes.

    Vamos criar um tema global personalizado que usará as cores primárias, secundárias e de superfície da nossa empresa.

    // Import the theming module
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$primary-color: #2ab759;
$secondary-color: #f96a88;
$surface-color: #fff;

$my-color-palette: palette(
    $primary: $primary-color,
    $secondary: $secondary-color,
    $surface: $surface-color
);

// IMPORTANT: Make sure you always include core first!
@include core();
@include typography();
// Pass the color palette we generated to the theme mixin.
@include theme($my-color-palette);

    Vamos explicar o que os mixins core e theme fazem. O mixin core cuida de algumas configurações, como adicionar acessibilidade aprimorada (por exemplo, cores adequadas para usuários daltônicos) e estilos de impressão para todos os componentes. O mixin theme inclui cada estilo de componente individual (exceto os listados como excluídos) e configura a paleta, esquema, elevações e arredondamento que não estão listados na lista $exclude de componentes.

    Important

    Incluir core antes theme é essencial. Os mixins core fornecem todas as definições básicas necessárias para que o mixin theme funcione corretamente.

    Excluding Components

    O mixin theme permite que você forneça uma lista de nomes de componentes a serem excluídos dos estilos globais do tema. Por exemplo, se você quiser remover completamente todos os estilos que incluímos para o igx-avatar e igx-badge para reduzir a quantidade de CSS produzido ou para fornecer seus próprios estilos personalizados, você pode fazer isso passando a lista de componentes assim:

    // ...
$unnecessary: (igx-avatar, igx-badge);

@include theme($my-color-palette, $exclude: $unnecessary);

    Se você sabe que seu aplicativo não usará alguns de nossos componentes, recomendamos adicioná-los à lista $exclude.

    Você pode fazer o inverso, ou seja, incluir apenas os estilos de componentes que deseja usando o método abaixo:

    @use 'sass:map';

@function include($items, $register) {
    @return map.keys(map.remove($register, $items...));
}

$allowed: (igx-avatar, igx-badge);

@include theme(
    $exclude: include($allowed, $components)
);

    Light and Dark Themes

    Também fornecemos versões claras e escuras para nossos quatro temas: Material, Fluent, Indigo, Bootstrap.

    Para usar qualquer uma das versões, você simplesmente precisa passá-la para o nosso mixin de tema:

    Luz

    @include core();
@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);
@include theme(
    $schema: $light-material-schema,
    $palette: $light-material-palette,
);

    Escuro

    @include core();
@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);
@include theme(
    $schema: $dark-material-schema,
    $palette: $dark-material-palette,
);

    Available Themes

    Ignite UI for Angular oferece a opção de escolher entre um conjunto de temas predefinidos. A tabela abaixo mostra todos os temas integrados que você pode usar imediatamente.

    Tema Esquema Paleta de cores
    Luz material $light-material-schema $paleta-de-material-leve
    Material Escuro $dark-material-schema $paleta-de-material-escuro
    Luz Fluente $light-fluent-schema $paleta-fluida-leve
    $light-fluent-excel-paleta
    $light-fluent-palavra-paleta
    Fluente Escuro $dark-fluent-schema $paleta-escuro-fluente
    $dark-fluent-excel-paleta
    $dark-fluent-palavra-paleta
    Luz de inicialização $light-bootstrap-schema $light-bootstrap-paleta
    Bootstrap escuro $dark-bootstrap-schema $paleta-de-bootstrap-escuro
    Luz Índigo $light-indigo-schema $paleta-indigo-claro
    Índigo Escuro $dark-indigo-schema $paleta-de-índigo-escuro

    Additional Resources

    Aprenda a criar temas de componentes individuais:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.