Temas

Con sólo unas pocas líneas de código, los usuarios pueden cambiar fácilmente la temática de sus componentes. Al estar desarrollado a través de SASS, el uso de la API es de baja dificultad y ofrece un rediseño de un componente, de varios componentes o de toda la suite.

The Essence of a Theme

Dado que IgniteUI para Angular basa sus diseños de componentes en las Directrices de diseño de materiales, intentamos acercarnos lo más posible a los colores, tamaños y apariencia general de nuestros componentes a los creados por Google.

Nuestro enfoque de la tematización se basa en varios conceptos simples.

paletas

El primer concepto es el de paletas de colores. Como en toda herramienta visual, los colores son la principal diferencia entre una aplicación y otra. Las Pautas de diseño de materiales prescriben paletas de colores predefinidas que varían en tono y luminosidad para un color base. Hay una buena razón para ello. Realmente quieren garantizar una buena combinación de colores y contraste entre los colores de fondo y los colores del texto de primer plano. Esto es genial, pero limitante al mismo tiempo. Si quisieras tener tu propia paleta personalizada que coincida con tu marca, no tendrías suerte. Reconocemos que esto es un problema, por lo que inventamos un algoritmo que generaría paletas similares a las de Material a partir de los colores base que usted proporcione. Aún más, también generamos colores de texto de contraste para cada tono de la paleta.

Temas

El segundo concepto es el de temas. Las paletas no servirían de mucho si no fueran utilizadas por un tema. Entonces tenemos temas para cada componente, y uno global, que le da estilo a toda la aplicación y a cada componente que contiene. Simplemente pasa tu paleta generada al tema global, nosotros nos encargamos del resto. Por supuesto, puedes diseñar cada componente individualmente a tu gusto. Veremos más de cerca cómo hacerlo más adelante en este artículo.

Tipografía

El último concepto gira en torno a la tipografía. Aunque tenemos una opción de tipo de letra predeterminada, realmente queremos brindarle el poder de diseñar su aplicación en todos los sentidos. La tipografía es una parte muy importante de eso. Proporcionamos un método para cambiar la familia de fuentes, los tamaños y pesos de los títulos, subtítulos y textos de párrafos en su aplicación.

Note

La tematización requiere Sass.

Generating Color Palettes

Nuestra biblioteca de temas está basada en Sass. Si usó la CLI de Ignite UI para arrancar su aplicación, puede especificar el estilo en la configuración de angular.json​ ​a scss, la CLI se encargará de compilar los estilos de Sass por usted. Si no ha utilizado Ignite UI CLI, debe configurar su creador para compilar estilos de Sass por usted.

Nuestras paletas aceptan argumentos a favorprimary,secondary​surface,,info,success,,warn yerror colores. El color primario es el que será el más prominente durante toda la aplicación. El color secundario es el que se usa en elementos que son accionables, como botones, interruptores, deslizadores, etc. El color de superficie se utiliza como color de fondo de algunos de los componentes. Los únicos argumentos obligatorios son los a favorprimary​secondary ysurface los colores. Por defecto las que correspondeninfo,success,warn, yerror a un conjunto predefinido que elijamos.

Para comenzar con nuestra primera paleta de colores, cree un archivo scss que será el archivo base para su tema global. Llamaré al mío "my-app-theme.scss".

@use "igniteui-angular/theming" as *;

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

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

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

¡Ahora tenemos una paleta que contiene exactamente 216 colores! Espera, ¿qué? ¿Cómo ha pasado eso? ¿Has dado 3 y has conseguido 216? ¿De dónde salieron los otros 213 colores? Vamos a parar aquí para explicar lo que acaba de pasar, ya que es bastante importante. Cuando proporcionasteprimary​secondary ysurface colores, tomamos esos colores y generamos tonos y colores de acento para cada uno. Básicamente, ahora en tu paleta tienes 3 subpaletas paraprimary ysecondary​surface colores. Cada subpaleta contiene 13 variaciones de color adicionales basadas en el color original. 5 de los 13 colores son tonos más claros de tu color original, y 4 son más oscuros. Los 4 colores restantes son versiones más exageradas y 'de acento' del color original. Con el color original, eso da un total de 14 colores en cada paleta.

Con tantos colores en cada subpaleta, quizá te preguntes, ¿cómo demonios voy a saber cuál es cuál, verdad? Es bastante sencillo, en realidad. Cada uno de los colores de la subpaleta tiene un número. Asignamos el número500 al color original. Los tonos más claros empiezan desde50 y varían hacia400. Los tonos más oscuros empiezan desde600 y varían hasta900. Los colores de acento tienen nombres deA100 cadena,A200,A400, yA700, respectivamente. Vale, pero eso es solo 42 de 216. No te preocupes, hay otro subpaleta que te damos. Uno que consiste en 'colores' grises, llamadograys. Es igual que las otras dos subpaletas de color, pero no incluye ninguna variación de acento. Bien, ahora estamos en 42 + 10 para un total de 52 colores. Eso aún queda mucho desde el 216. ¿De dónde vienen los otros 164 colores? Vamos a resolver el rompecabezas final. Recuerda que también puedes tener 4 colores adicionales parainfo,success ywarn.error Así que quedan otros 56 colores sin contabilizar. Recuerda que el recuento para lasprimary​secondary​surface​info​success​warn​error​grays subpaletas y subpaletas era exactamente 108, que es la mitad de los 216 colores. La mitad restante de los colores son los colores de contraste del texto para cada variante de color, todos tienen-contrast como sufijo en el nombre de la variable, y pueden ser negros o blancos.

¿Entiendo? ¡Bien! Pero, ¿cómo se accede a cualquiera de los colores de la paleta?

Obtener colores de subpaleta

Ofrecemos una función fácil de recordar y usarcolor. Se necesitan tres argumentos -palette,color, yvariant;

$my-primary-600: color($my-color-palette, "primary", 600);
$my-primary-A700: color($my-color-palette, "secondary", "A700");
$my-warning-color: color($my-color-palette, "warn");
// sample usage

.my-awesome-class {
  background: $my-primary-600;
  border-color: $my-primary-A700;
}

.warning-bg {
  background: $my-warning-color;
}

Obtener colores de texto de contraste

De manera similar a cómo obtenemos colores de subpaletas, hay una manera de obtener el color de texto de contraste para cada uno de los colores de las subpaletas.

$my-primary-800: color($my-palette, "primary", 600);
$my-primary-800-text: contrast-color($my-palette, "primary", 600);
// sample usage

.my-awesome-article {
  background: $my-primary-800;
  color: $my-primary-800-text;
}

Generating a Theme

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 nuestro propio tema.

Empecemos por nuestro primer ejemplo en esta página. Esta vez, sin embargo, vamos a incluir dos mixinscore ytheme; Por ahoracore no acepta ningún argumento,theme sin embargo, sí acepta algunos -$palette,$schema,$exclude,$roundness,$elevation,.$elevations Por ahora, solo hablaremos de la$palette discusión.

Important

Incluircore antestheme es esencial. Lacore mixina proporciona todas las definiciones básicas necesarias paratheme que funcione.

// Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

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

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

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

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

Eso es todo. Su aplicación ahora utilizará los colores de su paleta recién generada.

En su estado actual, la tipografía personalizada definitoria se limita a cambiar lafont family aplicación de la aplicación. Actualizaremos esta funcionalidad con las próximas versiones. Nuestro objetivo es ofrecer una forma completa de personalizar la tipografía en tu solicitud.

Para personalizar la tipografía utiliza eltypography mixin. Hace falta exactamente un argumento -config.

Important

Incluirtypography despuéscore es esencial. Esto está sujeto a cambios en futuras versiones.

// Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

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

// IMPORTANT: Make sure you always include core first!
@include core();
// Include typography before theme
@include typography(
  $config: (
    font-family: "Comic Sans MS",
  )
);
@include theme($default-palette);