如何使网页背景颜色与主题同步？

1. 在根组件中使用ngClass指令绑定body元素的类名，并在组件中动态计算类名。
2. 在主题服务中定义一个Observable变量，表示当前主题的类名。
3. 在主题服务中提供一个函数，用于更新当前主题的类名。
4. 在主题组件中订阅主题服务中的Observable变量，并在回调函数中调用更新类名的函数。
5. 在根模块中注入主题服务，并调用更新类名的函数以初始化页面的主题类名。

示例代码如下：

在根组件中：

import { Component, OnInit } from '@angular/core';
import { ThemeService } from './theme.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(private themeService: ThemeService) { }

  ngOnInit() {
    this.themeService.themeClass$.subscribe(themeClass => {
      document.body.className = themeClass;
    });
  }
}

在主题服务中：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ThemeService {

  private themeClassSource = new BehaviorSubject<string>('light-theme');
  themeClass$ = this.themeClassSource.asObservable();

  constructor() { }

  setTheme(themeClass: string) {
    this.themeClassSource.next(themeClass);
  }

}

在主题组件中：

import { Component, OnInit } from '@angular/core';
import { ThemeService } from '../theme.service';

@Component({
  selector: 'app-theme-selector',
  templateUrl: './theme-selector.component.html',
  styleUrls: ['./theme-selector.component.scss']
})
export class ThemeSelectorComponent implements OnInit {

  constructor(private themeService: ThemeService) { }

  ngOnInit(): void {
    this.themeService.themeClass$.subscribe(themeClass => {
      document.body.className = themeClass;
    });
  }

  setTheme(themeClass: string) {
    this.themeService.setTheme(themeClass);
  }

}

在根模块中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ThemeSelectorComponent } from './theme-selector/theme-selector.component';

@NgModule({
  declarations: [
    AppComponent,
    ThemeSelectorComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor