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

    If you've included the igniteui-angular.css file in your application project, now is a good time to remove it. We are going to use our own my-app-theme.scss file to generate a global theme for all components in our application.

    Ignite UI for Angular uses a global theme by default to theme the entire suite of components. You can, however, create themes scoped to components you have in your app, depending on your use case. For now, we will be including all of our themes in a single file. To generate a global theme we're going to be including two mixins core and theme. Both of those mixins accept a few arguments:

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

    Let's explain what the core and theme mixins do. The core mixin takes care of some configurations, like adding enhanced accessibility(e.g. colors suitable for color blind users) and printing styles for all components. The theme mixin includes each individual component style (bar the ones listed as excluded) and configures the palette, schema, elevations, and roundness that is not listed in the $exclude list of components.

    Importante

    Including core before theme is essential. The core mixins provide all base definitions needed for the theme mixin to work correctly.

    Excluindo Componentes

    The theme mixin allows you to provide a list of component names to be excluded from the global theme styles. For instance, if you want to completely remove all styles we include for the igx-avatar and igx-badge to reduce the amount of produced CSS or to supply your own custom styles, you can do so by passing the list of components like so:

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

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

    If you know your app will not be using some of our components, we recommend you add them to the $exclude list.

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

    Temas de Luz e Sombra

    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,
);

    Temas Disponíveis

    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

    Recursos adicionais

    Aprenda a criar temas de componentes individuais:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.