add event emitter to theme manager

src/theme/ThemeManager.ts

@@ -2,15 +2,18 @@ import lightTheme from "./LightTheme";
 import greyTheme from "./GreyTheme";
 import { Theme } from "./Theme";
 import darkTheme from "./DarkTheme";
+import EventEmitter2, { Listener } from "eventemitter2";
 
 export const themes = [lightTheme, darkTheme, greyTheme];
 
 const THEME_ID = "theme_id";
 
-export default class ThemeManager {
-  _theme: Theme;
-  onThemeChange: (theme: Theme) => void;
+export type ThemeManagerEvents = "themechange";
+
+export default class ThemeManager extends EventEmitter2 {
+  private _theme: Theme;
   constructor() {
+    super();
     this._theme = this.readFromLocalStorage() || lightTheme;
   }
 
@@ -20,7 +23,7 @@ export default class ThemeManager {
 
   public set theme(value: Theme) {
     this._theme = value;
-    this.onThemeChange?.(value);
+    this.emit("themechange", value);
     this.writetToLocalStorage(value);
   }
 
@@ -28,7 +31,7 @@ export default class ThemeManager {
     localStorage.setItem(THEME_ID, value.id);
   }
 
-  private readFromLocalStorage(): Theme {
+  private readFromLocalStorage(): Theme | undefined {
     const themeID = localStorage.getItem(THEME_ID);
     const theme = themes.find((eachTheme: Theme) => themeID === eachTheme.id);
     return theme;
@@ -37,4 +40,11 @@ export default class ThemeManager {
   public get themes(): Theme[] {
     return themes;
   }
+
+  public on(event: ThemeManagerEvents, callback: (...value: any[]) => void): Listener | this {
+    return super.on(event, callback);
+  }
+  public off(event: ThemeManagerEvents, callback: (...value: any[]) => void): this {
+    return super.off(event, callback);
+  }
 }