TailwindCSS dark mode Angular

dark.service.ts

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

@Injectable({
  providedIn: 'root',
})
export class DarkService {
  private renderer: Renderer2;
  private isDark = false;
  private matchMediaDark = window.matchMedia('(prefers-color-scheme: dark)');
  isDark$ = new Subject<boolean>();

  constructor(private rendererFactory: RendererFactory2) {
    this.renderer = this.rendererFactory.createRenderer(null, null);
    this.setOrRemoveClass();
    this.matchMediaDark.addEventListener('change', () =>
      this.setOrRemoveClass()
    );
  }

  toggle() {
    if (!('theme' in localStorage)) this.setLocalStorage('');
    this.isDark ? this.remove() : this.add();
  }

  private setOrRemoveClass() {
    this.getDark() ? this.add() : this.remove();
  }

  private add() {
    this.isDark = true;

    if ('theme' in localStorage) this.setLocalStorage('dark');

    this.renderer.addClass(document.body, 'dark');
    this.changeObserver();
  }

  private remove() {
    this.isDark = false;

    if ('theme' in localStorage) this.setLocalStorage('ligth');

    this.renderer.removeClass(document.body, 'dark');
    this.changeObserver();
  }

  private changeObserver() {
    this.isDark$.next(this.isDark);
  }

  private setLocalStorage(data: 'dark' | 'ligth' | '') {
    localStorage.theme = data;
  }

  private getDark() {
    return (
      localStorage.theme === 'dark' ||
      (!('theme' in localStorage) && this.matchMediaDark.matches)
    );
  }
}