Temas globales

    El tema global le permite generar rápidamente un tema que utilice su paleta de colores, esquema y elevaciones personalizados. La paleta de colores, el esquema y las elevaciones se propagarán a todos los componentes que no tengan temas personalizados creados para ellos.

    Descripción general

    Si has incluido eligniteui-angular.css archivo en tu proyecto de solicitud, ahora es un buen momento para eliminarlo. Vamos a usar nuestro propiomy-app-theme.scss archivo para generar un tema global para todos los componentes de nuestra aplicación.

    Ignite UI for Angular utiliza por defecto un tema global para temar toda la suite de componentes. Sin embargo, puedes crear temas con el alcance de los componentes que tienes en tu aplicación, dependiendo de tu caso de uso. Por ahora, incluiremos todos nuestros temas en un solo archivo. Para generar un tema global vamos a incluir dos mixinscore ytheme. Ambos mixins aceptan algunos argumentos:

    Core mixin

    Nombre Tipo Por defecto Descripción
    $print-layout booleano verdadero Incluir/excluir los estilos para imprimir.
    $enhanced-accessibility booleano FALSO Cambia los colores de los componentes y otras propiedades a valores más accesibles.

    Theme mixins

    Nombre Tipo Por defecto Descripción
    $palette mapa null El mapa de paleta que utilizarán los temas predeterminados de todos los componentes.
    $schema mapa $light-material-schema El esquema utilizado como base para diseñar los componentes.
    $exclude lista () Una lista de temas componentes que se excluirán del tema global.
    $roundness Número null Establece el factor de redondez global para todos los componentes (el valor puede ser cualquier fracción decimal entre 0 y 1).
    $elevation booleano true Activa/desactiva las elevaciones para todos los componentes del tema.
    $elevations Mapa $material-elevations El mapa de elevación que utilizarán todos los temas componentes.

    Vamos a crear un tema global personalizado que utilizará los colores primarios, secundarios y de superficie de nuestra 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 a explicar qué hacen loscore Mixin ytheme With. Elcore mixin se encarga de algunas configuraciones, como añadir una mayor accesibilidad (por ejemplo, colores adecuados para usuarios daltónicos) y estilos de impresión para todos los componentes. Latheme mezcla incluye cada estilo individual de componentes (excepto los que figuran como excluidos) y configura la paleta, el esquema, las elevaciones y la redondez que no aparecen en la$exclude lista de componentes.

    Important

    Incluircore antestheme es esencial. Lascore mezclinas proporcionan todas las definiciones de base necesarias para que latheme mezcla funcione correctamente.

    Excluding Components

    Eltheme mixin te permite proporcionar una lista de nombres de componentes que se excluirán de los estilos de tema global. Por ejemplo, si quieres eliminar completamente todos los estilos que incluimos para eligx-avatar yigx-badge reducir la cantidad de CSS producido o para proporcionar tus propios estilos personalizados, puedes hacerlo pasando la lista de componentes de la siguiente manera:

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

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

    Si sabes que tu aplicación no va a usar algunos de nuestros componentes, te recomendamos que los añadas a la$exclude lista.

    Puede hacer lo contrario, es decir, incluir sólo los estilos de componentes que desee utilizando el método siguiente:

    @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

    También ofrecemos versiones claras y oscuras para nuestros cuatro temas: Material, Fluent, Indigo, Bootstrap.

    Para usar cualquiera de las versiones, simplemente tendrías que pasarlo a nuestro tema mixin:

    Luz

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

    * Oscuro_

    @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 te da la opción de elegir entre un conjunto de temas predefinidos. La siguiente tabla muestra todos los temas incorporados que puede usar de inmediato.

    Tema Esquema Paleta de color
    Material: Luz $light-material-schema $paleta-de-materiales-claros
    Material: Oscuro $dark-material-schema $paleta-de-material-oscuro
    Luz fluida $light-fluent-schema $paleta-luz-fluida
    $paleta-excel-fluida-luz
    $paleta-de-palabras-luz-fluida
    Fluido Oscuro $dark-fluent-schema $paleta-fluida-oscura
    $paleta-de-excel-fluida-oscura
    $paleta-de-palabras-fluidas-oscuras
    Luz de arranque $light-bootstrap-schema $paleta-bootstrap-luz
    Bootstrap Oscuro $dark-bootstrap-schema $paleta-bootstrap-oscura
    Luz índigo $light-indigo-schema $paleta-índigo-claro
    Índigo Oscuro $dark-indigo-schema $paleta-índigo-oscuro

    Additional Resources

    Aprenda a crear temas de componentes individuales:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.