Cómo crear Themes con Angular 8

Qué son los themes de Angular

Los themes o temas de Angular son la forma de controlar los colores, los estilos generales y algunos particulares, que tiene este framework.

Podemos cambiarlos dinámicamente, ya que no estamos sujetos a tener un tema y mantenerlo siempre. Es decir, podemos empezar sin ningún tema posteriormente incluirlo, eliminarlo, evitarlo, etc.

Podemos configurar nuestros propios temas, o utilizar temas que ya están configurados.

Interiormente, los temas están formados por paletas de colores. Además, tienen dos tipos de estilos distintos, los estilos claros y los estilos oscuros.

Opciones de colores

Uno de los aspectos más importantes de los temas de Angular son los tipos de colores que existen:

• Color principal (primary)
• Color acentuado (accent)
• Color de alarma (warn)

Un ejemplo del uso de estos colores en componentes, combinando “material” y “themes”, sería el siguiente:

<mat-progress-spinner
color=”warn”>
</mat-progress-spinner>

En este ejemplo tenemos el componente “spinner”, al que asignamos el valor de color “warn”.

Cómo crear nuestros temas

Para crear nuestros temas hay que tener en cuenta varios aspectos:

· Tenemos que crear una carpeta, que debe estar dentro de /src/ pero no dentro de /src/app/, ya que provocaría un error al importar los temas.

· Crearemos, por ejemplo, la carpeta /src/Themes/, dentro de la cual podemos crear un fichero vacío con el nombre themeWhite.scss.

· Editamos ese fichero e incluimos las importaciones necesarias, que incluyen la parte de Material para poder definir después las paletas de colores:

@import’~@angular/material/theming’;
@include mat-core();

· A continuación debemos tres paletas de colores, cada una asociada a cada uno de los tres colores que vimos anteriormente. Esto se hace usando la función mat-palette para indicar la paleta y la variable para indicar el color y sus posibles opciones:

$palette-primary: mat-palette($mat-grey, 500);
$palette-accent: mat-palette($mat-light-blue);
$palette-warn: mat-palette($mat-green, 800);

· Una vez tenemos los colores asignados, pasamos a montar el tema, para lo que tenemos dos estilos diferentes que podemos utilizar, como son mat-light-theme (colores claros) y mat-dark-theme (colores oscuros). Vamos a utilizar, por ejemplo, el primero:

$light-theme: mat-light-theme(
    $palette-primary;
    $palette-accent;
    $palette-warn;
);

· De esta forma ya tenemos el tema creado, por lo que solo nos quedaría importarlo en nuestro proyecto completo.

Cómo usar nuestros temas

Para utilizar el tema que hemos creado, debemos importar el mismo en los estilos principales de la aplicación, que se encuentra en src/styles.scss.

En ese archivo incluimos el tema que hemos creado anteriormente de esta forma:

@import ‘Themes/myTema.scss’;
@include angular-material-theme($light-theme);

Si queremos hacer varios estilos tenemos que volver a repetir todo el proceso, en otro fichero distinto o en el mismo, aunque hacerlo en otro distinto queda más claro.

Repetimos el proceso, pero usando otro nombre distinto para la paleta, es decir, diferente a “light-theme” en este caso.

Como solo podemos incluir un único tema como general, debemos incluir el resto de temas como secundarios. Esto lo hacemos añadiendo al fichero src/styles.scss otra clase CSS con el otro tema que queremos utilizar:

.other-theme {
    @include angular-material-theme($other-theme);
}

De esta forma, cuando apliquemos esta clase a un elemento, todos los elementos que estén por debajo del mismo, van a heredar este otro tema y se van a ver con un tema distinto al que se le ve en el resto de la aplicación.

Documentación completa

En estos enlaces se pueden ver todas las paletas de colores que podemos utilizar y más información sobre los themes de Angular:

· Themes: https://material.angular.io/guide/theming

· Paletas: https://material.io/archive/guidelines/style/color.html#color-color-palette