Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Cómo crear Themes con Angular 8

Antonio Carlos García Gallardo
  • Escrito por Antonio Carlos García Gallardo el 20 de Septiembre de 2019
  • 2 min de lectura | Desarrollo Web
Cómo crear Themes con Angular 8
El reproductor de video será cargado en breves instantes.

¿Quieres saber qué son los themes de Angular? Te contamos de qué se componen y las opciones de colores que permiten, además de explicar cómo crear tus temas personales y utilizarlos posteriormente.

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

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Estructura de Angular 8

Estructura de Angular 8

Desarrollo Web

23 de Septiembre de 2019

En este vídeo vas nuestro profesor Carlos García te va a enseñar la estructura de un proyecto en Angular 8.

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 17 cursos:

  • Curso de Polymer
  • Curso de React JS
  • Optimización Web en el Navegador

y 14 cursos más!

Duración: 63 horas y 33 segundos

Curso de Angular 8 para principiantes

Curso de Angular 8 para principiantes

curso

Con este curso aprenderás:

  • Aprenderás conceptos de programación exportables a cualquier lenguaje.
  • Aprenderás técnicas de programación profesionales.
  • Aprenderás a crear componentes exportables a otros proyectos.

Duración: 4 horas y 44 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars