0

Estoy haciendo un SPA con soporte para dark-mode pero me carga el nombre de la variable y no el valor

introducir la descripción de la imagen aquí

export class AppComponent implements OnInit {
  title = 'App-title';

  ngOnInit(){
    var local = localStorage.getItem("theme") || "light-theme";
    this.loadStyle(local == "light-theme" ? "light-theme":"dark-theme");
  }

  constructor(@Inject(DOCUMENT) private document: Document) {}

  loadStyle(styleName: string) {
    const head = this.document.getElementsByTagName('head')[0];

    let themeLink = this.document.getElementById(
      'client-theme'
    ) as HTMLLinkElement;
    if (themeLink) {
      themeLink.href = styleName;
    } else {
      const style = this.document.createElement('link');
      style.id = 'client-theme';
      style.rel = 'stylesheet';
      style.href = `${styleName}`;

      head.appendChild(style);
    }
  }
}

introducir la descripción de la imagen aquí

1 respuesta 1

0

Esto es por que te falta concatenar la extensión del archivo en este caso light-theme.css o dark-theme.css. Yo te recomendaría que mejor usaras un solo archivo y hagas la diferencia del "theme" con una clase .dark-theme , .light-theme, de esta manera solo tendrías que cambiar el nombre de la clase en tu html. Te dejo una pagina de referencia que lo explica muy bien: Dark Theme for your Angular app

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.