BrowserStateService: یک نقطه از حقیقت برای حالت حالت تاریک در Angular

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

@Injectable({
  providedIn: 'root',
})
export class BrowserStateService {
  private isDarkModeSubject = new BehaviorSubject<boolean>(false);
  public isDarkMode$ = this.isDarkModeSubject.asObservable();

  constructor() {
    // Check if 'dark' class is present on body element on initialization
    this.isDarkModeSubject.next(document.body.classList.contains('dark'));

    // Watch for changes to 'dark' class on body element
    new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.attributeName === 'class') {
          const isDark = document.body.classList.contains('dark');
          this.isDarkModeSubject.next(isDark);
        }
      });
    }).observe(document.body, { attributes: true });

    // Listen for user's preferred color scheme
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    mediaQuery.addEventListener('change', (event) => {
      const isDark = event.matches;
      this.setDarkMode(isDark);
    });

    // Set initial mode based on user's preferred color scheme
    if (mediaQuery.matches) {
      this.setDarkMode(true);
    }
  }

  toggleMode() {
    const isDark = !this.isDarkModeSubject.value;
    this.setDarkMode(isDark);
  }

  setDarkMode(isDark: boolean) {
    if (isDark) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }

    this.isDarkModeSubject.next(isDark);
  }
}

import { BrowserStateService } from './browser-state.service';

constructor(private browserStateService: BrowserStateService) {}

// Subscribe to changes to the state of dark mode
this.browserStateService.isDarkMode$.subscribe(isDarkMode => {
  // Do something based on the value of isDarkMode
});

// Set the state of dark mode
this.browserStateService.setDarkMode(true);

// Toggle the state of dark mode
this.browserStateService.toggleMode();

import { Component, OnInit } from "@angular/core";
import { BrowserStateService } from "./browser-state.service";

@Component({
  selector: "app-my-component",
  template: `
    <div [ngClass]="{ 'dark-mode': isDarkMode }">
      <p>Some text in the component.</p>
      <button (click)="toggleMode()">Toggle Mode</button>
    </div>
  `,
})
export class MyComponent implements OnInit {
  isDarkMode: boolean;

  constructor(private browserStateService: BrowserStateService) {}

  ngOnInit() {
    // Subscribe to changes to the
    // state of dark mode
    this.browserStateService.isDarkMode$.subscribe((isDarkMode) => {
      this.isDarkMode = isDarkMode;
    });
  }

  toggleMode() {
    this.browserStateService.toggleMode();
  }
}