如何在全球范围内使用多个主题？

Question

我正在为我的角度应用程序创建一个设置页面。

它具有带单选按钮的深色和浅色主题选项。

setting.component.html

<div class="col">
 <input type="radio" value="Dark" (click)="blackTheme()" [(ngModel)]="themeselector">
 <label for="radio" class="pl-3 clr">Dark </label>
</div>

<div class="col">
 <input type="radio" (click)="whiteTheme()" [(ngModel)]="themeselector">
 <label for="radio" class="pl-3 clr">Light </label>
</div>

setting.component.ts

 themeselectors(){
    if(this.radiochecked){
      this.themeselector = true;
    }
    else{
      this.themeselector = false;
    }
  }


  blackTheme() {
    document.getElementById("main-theme").style.backgroundImage = "url('../assets/2/2.png')";
    localStorage.setItem('radiochecked', 'true');
    var cls = document.getElementsByClassName("clr");
    for (var i=0; i < cls.length; i++){
      const c = cls[i] as HTMLElement;
        c.style.color = 'white'
    }
  }

  whiteTheme() {
    document.getElementById("main-theme").style.backgroundImage = "url('../assets/3/3.png')";
    localStorage.setItem('radiochecked', 'true');
    var cls = document.getElementsByClassName("clr");
    for (var i=0; i < cls.length; i++){
      const c = cls[i] as HTMLElement;
        c.style.color = 'black'
        c.style.borderColor = 'black'
    }
  }

它在设置组件上有效，但在导航到其他组件时不起作用。我如何使其在全球范围内运作？