Angular暗黑模式切换后刷新页面状态不保持问题咨询

核心问题 #

刷新页面后，组件的checked变量默认是false，没从localStorage读取保存的状态；同时主题服务也没在初始化时根据localStorage恢复主题样式，导致复选框和主题都重置了。

修复步骤 #

1. 改造ThemeService，初始化时自动恢复主题

修改theme.service.ts，在构造函数里读取localStorage的状态，自动设置主题并同步状态：

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

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  private _themeDark: Subject<boolean> = new Subject<boolean>();
  isThemeDark = this._themeDark.asObservable();

  constructor() {
    // 页面加载时读取本地存储，恢复之前的主题设置
    const savedDarkMode = localStorage.getItem('dark');
    const isDark = savedDarkMode === 'true';
    this.setDarkTheme(isDark);
  }

  setDarkTheme(isThemeDark: boolean) {
    this._themeDark.next(isThemeDark);

    if (isThemeDark) {
      console.log('Dark Used');
      document.body.className = 'bootstrap-dark';
      localStorage.setItem('dark', 'true');
    } else {
      console.log('Light Used');
      document.body.className = 'bootstrap';
      localStorage.setItem('dark', 'false');
    }
  }
}

2. 同步组件的复选框状态

修改sample.component.ts，在初始化时同步主题状态到复选框：

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

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
  checked: boolean = false;

  constructor(
    private themeService: ThemeService
  ) {}

  ngOnInit() {
    // 订阅主题服务的状态变化，确保复选框和主题同步
    this.themeService.isThemeDark.subscribe(isDark => {
      this.checked = isDark;
    });
  }

  toggleDarkTheme() {
    this.checked = !this.checked;
    this.themeService.setDarkTheme(this.checked);
    console.log("Dark Theme > ", this.checked);
  }
}

3. 模板绑定复选框状态

修改app.sample.component.html，把复选框的勾选状态和组件变量绑定：

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" 
         (change)="toggleDarkTheme()" [checked]="checked">
  <label class="form-check-label" for="flexSwitchCheckDefault">Dark Mode</label>
</div>

修复逻辑说明 #

• 主题服务在初始化时读取localStorage，确保页面加载瞬间就应用保存的主题样式。
• 组件订阅主题服务的状态流，保证复选框的勾选状态始终和当前主题一致。
• 模板通过[checked]绑定组件变量，让UI状态和数据状态同步，避免刷新后复选框重置。

内容的提问来源于stack exchange，提问作者sckai