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 ha incluido el archivo igniteui-angular.css en el proyecto de su aplicación, ahora es un buen momento para eliminarlo. Usaremos nuestro propio archivo my-app-theme.scss para generar un tema global para todos los componentes de nuestra aplicación.

    Ignite UI for Angular utiliza un tema global de forma predeterminada para crear un tema para todo el conjunto de componentes. Sin embargo, puede crear temas específicos para los componentes que tiene en su aplicación, según su caso de uso. Por ahora, incluiremos todos nuestros temas en un solo archivo. Para generar un tema global, incluiremos dos mixins core y theme. 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);
    scss

    Expliquemos qué hacen los mixins core y theme. El mixin core se encarga de algunas configuraciones, como agregar accesibilidad mejorada (por ejemplo, colores adecuados para usuarios daltónicos) y estilos de impresión para todos los componentes. La combinación theme incluye cada estilo de componente individual (excepto los que figuran como excluidos) y configura la paleta, el esquema, las elevaciones y la redondez que no figuran en la lista de componentes $exclude.

    Incluir core el antes theme es esencial. Los core mixins proporcionan todas las definiciones básicas necesarias para que la theme mezcla funcione correctamente.

    Excluding Components

    El mixin theme le permite proporcionar una lista de nombres de componentes que se excluirán de los estilos de temas globales. Por ejemplo, si desea eliminar por completo todos los estilos que incluimos para igx-avatar e igx-badge para reducir la cantidad de CSS producido o para proporcionar sus propios estilos personalizados, puede hacerlo pasando la lista de componentes de esta manera:

    // ...
    $unnecessary: (igx-avatar, igx-badge);
    
    @include theme($my-color-palette, $exclude: $unnecessary);
    scss

    Si sabe que su aplicación no utilizará algunos de nuestros componentes, le recomendamos que los agregue a la lista $exclude.

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

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

    Oscuro

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

    Available Themes

    Ignite UI for Angular te ofrece la opción de elegir entre un conjunto de temas predefinidos. La siguiente tabla muestra todos los temas integrados que puede utilizar 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.