如何在Angular應用中實現動態主題切換并保持用戶偏好設置

要在Angular應用中實現動態主題切換并保持用戶偏好設置，可以按照以下步驟操作：

1. 創建一個主題服務：首先創建一個Angular服務來處理主題切換和用戶偏好設置。在這個服務中，可以定義一個主題對象，包括主題的名稱、顏色等信息，并提供方法來切換主題和保存用戶偏好設置。

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

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  private currentTheme: string = 'default';

  themes = [
    { name: 'default', primaryColor: '#2196F3', accentColor: '#FF4081' },
    { name: 'dark', primaryColor: '#333', accentColor: '#FFA500' }
  ];

  getCurrentTheme() {
    return this.themes.find(theme => theme.name === this.currentTheme);
  }

  setTheme(themeName: string) {
    this.currentTheme = themeName;
    // Save user preference in local storage
    localStorage.setItem('theme', themeName);
  }
}

2. 在AppComponent中使用主題服務：在應用的根組件AppComponent中使用主題服務來獲取當前主題并動態應用到應用中。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private themeService: ThemeService) {
    const themeName = localStorage.getItem('theme');
    if (themeName) {
      this.themeService.setTheme(themeName);
    }
  }

  get currentTheme() {
    return this.themeService.getCurrentTheme();
  }

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

3. 在模板中應用主題：在應用的模板中通過ngStyle等指令來動態應用主題。

<div [ngStyle]="{ 'background-color': currentTheme.primaryColor, 'color': currentTheme.accentColor }">
  <!-- Your app content here -->
</div>

<button (click)="setTheme('default')">Default Theme</button>
<button (click)="setTheme('dark')">Dark Theme</button>

通過以上步驟，在Angular應用中就可以實現動態主題切換并保持用戶偏好設置。用戶在切換主題時，應用會根據用戶的設置動態改變主題顏色。同時，用戶的偏好設置會被保存在本地存儲中，下次打開應用時會保持用戶之前選擇的主題。