Temas en angular, ¿cómo tener temas light y dark con css y angular ?

¿Cómo hacer Temas en angular?, Una de las cosas que vemos en muchas páginas es el cambio del tema, tener una versión dark y una versión light para la web esto para que se adapte mejor a los gustos de la persona que entra a nuestra plataforma.

Existen varias maneras de hacerlo, pero elegí usar puro css con variables nativas y 1 sola línea de js.

Lo único que vamos a hacer es crear un nuevo proyecto de angular 14, vamos a usar la página demo que nos genera angular, y vamos a usar este template para hacer el cambio de color.

:root,
 :root.light {
    --bg-color: #f1f1f1;
    --font-size-txt: 1em;
    --font-size-h1: 2em;
    --bg-color-sections: #009688;
    --font-color-sub: rgba(0, 0, 0, .54);
    --font-color-main: #000;
    --bg-color-card: #fff;
}

:root.dark {
    --bg-color: #242424;
    --font-size-txt: 1em;
    --font-size-h1: 2em;
    --bg-color-sections: 19a093;
    --font-color-sub: rgba(255, 255, 255, .54);
    --font-color-main: #fff;
    --bg-color-card: #0c0c0cab;
}

@use "./assets/css/variables.scss" as *;
body {
    // background-color: var(--bg-color);
    background-color: var(--bg-color);
    color: var(--font-color-main, #666);
}

p {
    color: var(--font-color-main);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--font-color-main);
}

span {
    color: var(--font-color-sub);
}

.card {
    background-color: var(--bg-color-card) !important;
    color: var(--font-color-sub) !important;
}

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;

    if (userPrefersDark) {
      this.setThema('dark')
    }
    if (userPrefersLight) {
      this.setThema('light')
    }
  }
  title = 'miwebtrespuntocero1';
  //js normal 
  //const setTheme = theme => document.documentElement.className = theme;
  setThema(t: string) {
    // document.body.classList.toggle('dark')
    document.documentElement.className = t;
  }
}

Vamos a explicar sobre el código para hacer temas en angular

Css

Para declarar variables usamos un nombre que comience con dos guiones (--) y un valor cualquiera para nuestra variable. Como cualquier otra propiedad, la escribimos dentro una reglas de estilo, algo así:

elemento {
  --mi-bg-variable: red;
}

Ten en cuenta que el selector que usemos para las reglas de estilo define el ámbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena práctica común es declarar variables en la pseudo-clase :root, y así aplicarlas globalmente al documento HTML:

:root {
  --main-bg-color: brown;
}

para mayor descripción pueden encontrarlo en la página de mozilla.

Con esto podemos explicar el archivo variable.scss, como podemos ver agregamos los variables de css en :root y creamos :root .light y :root .dark, esto para aplicar el cambio de color cuando lo cambiemos con js.

con style vamos a usar dos cosas “fuera de lo común”, usaremos @use “./assets/css/variables.scss” as *; para agregar el scss que se llama variable, el * hace que se agregue directo al css como si fuera un include.

lo otro es usar var, var lo que hace es leer las variables que tenemos en css como por ejemplo :

p {

color: var(–font-color-main);

}

con –font-color-main obtenemos la variable declarado arriba y este podemos modificarlo a placer, recordemos que en style agregaremos los estilos generales para toda nuestra web.

Typescript

Como fue mencionado al inicio para hacer temas en angular, solo necesitamos una línea de js para hacer cambios de dark a light , prácticamente lo que vamos a hacer es cambiar el estilo general .

setThema(t: string) {
    // document.body.classList.toggle('dark') //para un solo boton
    document.documentElement.className = t;
  }

lo que hacemos en esta función es pasarle el nombre de la clase que queramos agregar al root, pasamos si es dark o light (o cualquier color de tema).

agregamos unos botones para llamar a esta función y listo 😀 al dar click hacemos cambios de color de estilo.

de manera muy sencilla podemos hacer cambio de temas en nuestra web, ahora si queremos detectar que tema tienes predeterminado de tu navegador vamos a hacer lo siguiente en el onInit del typescript:

const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;

    if (userPrefersDark) {
      this.setThema('dark')
    }
    if (userPrefersLight) {
      this.setThema('light')
    }

con matchmedia podemos saber que configuración de colores tenemos, si es dark nos dará true ya que sacamos esta información desde prefers-color-scheme que nos da css y si lo queremos usar en el css podemos hacer lo siguientes:

@media (prefers-color-scheme: dark) {
    body {
        --content: '🌑 dark version';
    }
    body::after {
        content: var(--content);
        padding: 5px 10px;
        background: var(--bg-color);
        border: 1px solid white;
        color: var(--font-color-main);
    }
}

El resultado final: