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:

    ###centro

    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.

    ###tema

    Nombre Tipo Por defecto Descripción
    $palette mapa nulo 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 1 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.

    Creemos un tema global personalizado que utilizará los colores primarios y secundarios 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;

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

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

    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.

    Important

    Incluir core y typography antes theme es esencial. Los mixins core y typography proporcionan todas las definiciones básicas necesarias para que el mixin theme 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);

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

    Light and Dark Themes

    Además de la combinación theme más potente, incluimos dos combinaciones de temas globales adicionales para un arranque rápido de temas claros y oscuros. Esos mixins son light-theme y dark-theme.

    A continuación se muestra una muestra rápida de cómo puede crear un tema claro y oscuro para su aplicación:

    .light-theme {
    @include light-theme($light-material-palette);
}

.dark-theme {
    background: #333;
    color: #fff;

    @include dark-theme($light-material-palette);
}

    Lo ideal es configurar las clases.light-theme o.dark-theme en un elemento en lo alto del árbol DOM de su aplicación. Su elemento app-root es un buen candidato para eso.

    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 mezclando Esquema Paleta de color Disponible en versión
    Material (base) tema() $light-material-schema nulo todo
    Material (ligero) tema ligero() $light-material-schema $paleta-de-materiales-claros 6.2 +
    Material (oscuro) tema oscuro() $dark-material-schema $paleta-de-material-oscuro 6.2 +
    Fluido tema-luz-fluido() $light-fluent-schema $paleta-luz-fluida
    $paleta-excel-fluida-luz
    $paleta-de-palabras-luz-fluida    		 8.2 +
    Fluido (oscuro) tema-oscuro-fluido() $dark-fluent-schema $paleta-fluida-oscura
    $paleta-de-excel-fluida-oscura
    $paleta-de-palabras-fluidas-oscuras    		 8.2 +
    Oreja tema-luz-de-bootstrap() $light-bootstrap-schema $paleta-bootstrap-luz 9.0 +
    Bootstrap (oscuro) bootstrap-tema-oscuro() $dark-bootstrap-schema $paleta-bootstrap-oscura 9.0 +
    Índigo tema-luz-índigo() $light-indigo-schema $paleta-índigo-claro 10.1 +
    Índigo (oscuro) tema-índigo-oscuro() $dark-indigo-schema $paleta-índigo-oscuro 10.1 +
    Note

    Tenga en cuenta que todos los mixins de temas de alto nivel envuelven el mixin theme base.

    Todos los mixins de temas se pueden utilizar como punto de partida para crear su propio tema. Creemos un nuevo tema usando el mixin bootstrap-light-theme.

    // 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: #b71053;
$secondary-color: #6c757d; 

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

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

    Browser Support

    Antes de Ignite UI for Angular 13, el valor de $igx-legacy-support es bastante importante ya que determina cómo funcionan los temas de los componentes. Cuando su valor se establece en true, las reglas de estilo de componentes individuales tendrán sus valores establecidos en el momento de la compilación en los valores codificados definidos en su tema. Sin embargo, si establece el valor de $igx-legacy-support en false, las reglas de estilo buscarán valores de las variables CSS definidas en el alcance:root o en el alcance del bloque más cercano.

    La regla general con respecto al valor de $legacy-support debe venir dictada por si incluirá soporte para Internet Explorer 11 o no. Si desea incluir soporte para IE11, establezca el valor $legacy-support en true; de lo contrario, establecer su valor en false (predeterminado) forzará las variables CSS para la temática. Se eliminó la compatibilidad con IE11 y navegadores anteriores en Ignite UI for Angular 13.

    API Overview

    Additional Resources

    Aprenda a crear temas de componentes individuales:

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