DEV Community: Facundo Rodriguez

Dark theme en Angular con CSS fácil

Facundo Rodriguez — Wed, 21 Jun 2023 14:27:38 +0000

Desde ya hace unos años que los dark themes se han vuelto populares por lo que hoy en día casi todas las páginas web poseen uno.

Existen varias formas para lograr nuestro objetivo pero en este post veremos una forma sencilla y rápida de implementar un dark theme utilizando Typescript/Javascript y CSS en una aplicación Angular.

1. Variables CSS

El dark theme puede ser implementado utilizando variables de CSS. Las variables estan disponibles en casi todos los buscadores exceptuando Internet Explorer.

A continuación les dejo un ejemplo de como definir las variables CSS para el theme por defecto y para el dark theme haciendo uso de una clase:

body {
  --text-color: #222;
  --background-color: #fff;
}

body.dark-theme {
  --text-color: #fff;
  --background-color: #222;
}

2. Uso de las variables en los estilos globales

Una vez definidas las variables para cada theme, podremos utilizarlas dentro de nuestros estilos globales. Es importante entender que en a partir de ahora la eleccion de los colores dependerá de lo que anteriormente definimos:

body {
  background: var(--background-color);
}

h1,
p {
  color: var(--text-color);
}

3. Decidir que theme utilizar

Con todo lo anterior ya listo, prender/apagar el dark theme es sencillo y puede realizarse con el siguiente código Typescript/Javascript:

document.body.classList.toggle("dark-theme");

Lo que hace este código es agregar o quitar la clase dark-theme del elemento body y de esta manera se produce el cambio en el valor de las variables previamente definidas.

A continuación, dejo una aplicación a modo de ejemplo en donde se definen las variables de CSS antes mencionadas y se utilizan los emojis de 🌞 y 🌚 para activar/desactivar el dark theme:

Lo que hago en la app es definir una función que prende/apaga el dark theme:

@Component({...})
export class App {
  toggleDarkTheme(): void {
    document.body.classList.toggle('dark-theme');
  }
}

Y en el template agrego un botón que hace uso de esta función:

<button (click)="toggleDarkTheme()">{{ icon() }}</button>

Además agrego un signal para poder saber si el dark theme está activo y así determinar que ícono mostrar.

4. Leer la preferencia del usuario

CSS ofrece la posibilidad de leer la preferencia del sistema operativo establecida por el usuario a través de la media query @media(prefer-color-scheme: dark).

Esta media query se puede obtener desde Typescript/Javascript de la siguiente manera:

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

Esto podría usarse al iniciar la aplicación para establecer el tema predeterminado de acuerdo a la preferencia del usuario usando el siguiente código:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
document.body.classList.toggle('dark-theme', prefersDark.matches);

Agregar parámetros al navegar en Angular

Facundo Rodriguez — Tue, 24 Nov 2020 12:30:17 +0000

Existen ocasiones en donde necesitamos pasar un parámetro, generalmente un identificador, a una ruta con la intención de utilizarlo para llamar a una API y obtener cierta información. En esta ocasión vamos a ver cómo definir una ruta que acepta un parámetro, cómo utilizar la directiva routerLink para pasar el valor del parámetro a través de la ruta y también cómo acceder al valor del parámetro desde un componente.

Crear un nuevo componente

En primer lugar vamos a crear un nuevo componente ejecutando el siguiente comando del Angular CLI:



ng generate component post

Definir la nueva ruta

Lo próximo a realizar es agregar una nueva ruta hacia nuestro nuevo componente en el array de definiciones de rutas dentro de app.module.ts. Vamos a crear un nuevo objeto y esta vez en la propiedad path necesitaremos agregar /:id para indicar que la ruta espera recibir un parámetro llamado id. La definición de las rutas quedará de la siguiente forma:



// src/app/app.module.ts
const routes: Route[] = [
  { path: "home", component: HomeComponent },
  { path: "posts", component: PostsComponent },
  { path: "posts/:id", component: PostComponent },
  { path: "**", redirectTo: "home" }
];

Si ejecutamos el comando ng serve podremos navegar a nuestro nuevo componente modificando la URL de nuestro navegador a, por ejemplo, /posts/1. De esta forma, el valor del parámetro id será el que pasemos al final de la URL.

Enlazar con nuestra aplicación

Para navegar hacia el nuevo componente desde nuestra aplicación haremos uso de la directiva routerLink y agregaremos algunos valores de parámetros para simular un listado de links de navegación dentro de nuestro PostsComponent.



<!-- src/app/posts/posts.component.html -->
<ul>
  <li><a [routerLink]="['/posts', 1]">Post 1</a></li>
  <li><a [routerLink]="['/posts', 2]">Post 2</a></li>
  <li><a [routerLink]="['/posts', 3]">Post 3</a></li>
</ul>

De esta manera le indicamos a Angular que queremos navegar a las rutas /posts/1, /posts/2 o /posts/3 al hacer click en alguno de los links.

Obtener el valor del parámetro

Como hablamos al principio, es posible que querramos obtener cierta información utilizando el valor del parámetro id por lo que vamos a analizar las alternativas que tenemos para lograrlo.

Hay dos maneras diferentes de obtener el valor del parámetro.

La primera es a través del snapshot de la ruta. El snapshot de la ruta nos provee de un objeto llamado paramMap que expone los métodos get, getAll y has para interactuar con los parámetros de la ruta actual.

Para acceder al snapshot de la ruta es necesario inyectar en el componente la clase ActivatedRoute como se muestra a continuación:



// src/app/post/post.component.ts
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "app-post",
  templateUrl: "./post.component.html",
  styleUrls: ["./post.component.css"]
})
export class PostComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get("id");
  }
}

Y, para simplificar el ejemplo, vamos a simplemente mostrar el valor en el html:



<!-- src/app/post/post.component.html -->
<p>
  Post con id: {{ id }}
</p>

Haciendo click sobre cada link observaremos que la aplicación muestra correctamente el valor del parámetro. Sin embargo, esta alternativa para obtener el valor del identificador tiene una falencia ya que si la navegación a otros post se produce dentro de nuestro PostCompoent, éste no detecta el cambio en el paramMap por lo que no realiza la navegación.

Suscribir a los cambios en paramMap

Para solucionar el inconveniente antes mencionado debemos reemplazar el uso del snapshot de la ruta por una suscipción al parámetro paramMap del ActivatedRoute inyectado. De esta forma estaremos observando los cambios que suceden sobre los parámetros de la ruta y reaccionando correctamente ante cada uno de ellos.

El componente pasaría verse de la siguiente forma:



// src/app/post/post.component.ts
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, ParamMap } from "@angular/router";

@Component({
  selector: "app-post",
  templateUrl: "./post.component.html",
  styleUrls: ["./post.component.css"]
})
export class PostComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
    });
  }
}

Lo más importante a recordar a la hora de decidir entre cuáles de los métodos utilizar es saber en dónde sucede el cambio del parámetro.

Si el valor del parámetro es modificado dentro del mismo componente que lo utiliza entonces debemos suscribirnos al paramMap.

En caso de que este no sea alterado dentro del componente podremos utilizar el snapshot de la ruta sin inconvenientes.

Aquí se puede ver el código final:

Stackblitz

Navegar entre rutas de Angular utilizando routerLink

Facundo Rodriguez — Mon, 23 Nov 2020 11:11:31 +0000

En el post anterior realizamos agregamos la primer ruta en nuesta aplicación Angular.

Aprovechando que ya contamos con el array de definiciones de rutas de nuestra aplicación dentro de app.module.ts vamos a crear una ruta nueva y navegar utilizando routerLink.

Nuevo componente

Vamos a comenzar creando un nuevo componente con el siguiente comando del CLI:

ng generate component posts

Luego, agregar una nueva ruta sólo consistiría en sumar el nuevo componente a la colección de rutas:

const routes: Route[] = [
  { path: "home", component: HomeComponent },
  { path: "posts", component: PostsComponent },
  { path: "**", redirectTo: "home" }
];

Y, por último, añadimos la posibilidad de navegar entre las rutas de nuestra aplicación en app.component.html:

<!-- app.component.html -->
<nav>
  <a href="/home">Inicio</a> |
  <a href="/posts">Posts</a>
</nav>
<router-outlet></router-outlet>

Excelente!! Al ejecutar el comando ng serve ya podremos navegar por nuestra aplicación.

Pero puede que estemos frente a un pequeño problema. Al navegar a la nueva ruta se produce un refresh de la página y esto puede llegar a ser algo no deseado si pensamos crear una SPA porque estamos perdiendo el estado de la aplicación ante cada click en los links.

Incorporar `routerLink`

Para solucionar este inconveniente vamos a utilizar la directiva routerLink para cambiar de página evitando hacer un refresh.

Simplemente lo que debemos hacer es reemplazar nuestros href por routerLink:

<!-- app.component.html -->
<nav>
  <a routerLink="/home">Inicio</a> |
  <a routerLink="/posts">Posts</a>
</nav>

Y ahora cuando hacemos click entre las rutas de nuestra aplicación ya no se reliza el refresh de la página!!

Aquí se puede ver el código final:

Stackblitz

Agregar rutas a una app Angular existente

Facundo Rodriguez — Sun, 22 Nov 2020 19:26:50 +0000

Al momento de crear por primera vez una aplicación Angular utilizando el Angular CLI con el comando ng new se nos da la posibilidad de agregar las rutas:

? Would you like to add Angular routing? (y/N)

Es posible que al principio no querramos enfocarnos en el ruteo por lo tanto seleccionamos que no.

Entonces, qué sucede si en el futuro queremos agregar las rutas? No tenemos un comando específico en el CLI que nos permita generarlas por lo que ahora veremos como hacerlo nosotros mismos.

Crear las rutas

Si queremos, podemos crear nuestras rutas dentro de un módulo y utilizarlo únicamente para la definición de las rutas. Esto se puede hacer creando el módulo app-routing utilizando siguiente comando del CLI:

ng generate module app-routing --flat --module=app

La opción flat evita que se cree una nueva carpeta para el nuevo módulo y la opción module nos permite indicar que nuevo módulo debe ser importado en el AppModule.

Otra opción disponible es mantener las rutas junto con el mismo módulo en donde aplican.

Para hacer esto, en app.module.ts debemos importar dos elementos del módulo de rutas de Angular:

// src/app/app.module.ts
import { RouterModule, Routes } from '@angular/router';

Luego, necesitamos crear un array que eventualmente contendrá la definición de nuestras rutas:

// src/app/app.module.ts
const routes: Routes = [];

Por último, en el decorador NgModule debemos agregar el módulo de rutas de Angular a la lista de módulos importados:

// src/app/app.module.ts
@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent, HomeComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Mostrar las rutas

Posterior a la creación de las rutas, necesitamos una forma de mostrar el contenido de la ruta a la cual queremos acceder. Para esto utilizamos un componente dentro del módulo de rutas de Angular llamado router-outlet de la siguiente forma:

<!-- src/app/app.component.ts -->
<router-outlet></router-outlet>

Para corroborar que esto funciona vamos a crear nuestra primer ruta. Primero, creemos nuestro primer componente con el siguiente comando del CLI:

ng generate component home

Luego, agregamos la nueva ruta hacia el componente home y una ruta de respaldo en caso de que se ingrese una ruta no definida:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '**', redirectTo: 'home' },
]

Al ejecutar el comando ng serve deberías ser capaz de ver la ruta home en el browser.

Aquí se puede ver el código final:

Stackblitz

DEV Community: Facundo Rodriguez

Dark theme en Angular con CSS fácil

1. Variables CSS

2. Uso de las variables en los estilos globales

3. Decidir que theme utilizar

4. Leer la preferencia del usuario

Agregar parámetros al navegar en Angular

Crear un nuevo componente

Definir la nueva ruta

Enlazar con nuestra aplicación

Obtener el valor del parámetro

Suscribir a los cambios en paramMap

Navegar entre rutas de Angular utilizando routerLink

Nuevo componente

Incorporar routerLink

Agregar rutas a una app Angular existente

Crear las rutas

Mostrar las rutas

Incorporar `routerLink`