save current theme to localStorage

src/context.tsx

@@ -2,7 +2,6 @@ import { Texts, TrTr } from "./const/texts";
 import { RTMT } from "./rtmt/rtmt";
 import { RTMTWS } from "./rtmt/rtmt_websocket";
 import { UserKeyStore, UserKeyStoreImpl } from "./store/key_store";
-import defaultTheme from "./theme/DefaultTheme";
 import ThemeManager from "./theme/ThemeManager";
 
 export type Context = {
@@ -16,7 +15,7 @@ export const initContext = () => {
   const rtmt = new RTMTWS();
   const userKeyStore = new UserKeyStoreImpl();
   const texts = TrTr;
-  const themeManager = new ThemeManager(defaultTheme);
+  const themeManager = new ThemeManager();
   return {
     rtmt: rtmt,
     userKeyStore: userKeyStore,

src/theme/ThemeManager.ts

@@ -1,18 +1,39 @@
+import defaultTheme from "./DefaultTheme";
+import oldTheme from "./OldTheme";
 import { Theme } from "./Theme";
 
+export const themes = [defaultTheme, oldTheme];
+
+const THEME_ID = "theme_id";
+
 export default class ThemeManager {
   _theme: Theme;
   onThemeChange: (theme: Theme) => void;
-  constructor(theme: Theme) {
-    this._theme = theme;
+  constructor() {
+    this._theme = this.readFromLocalStorage() || defaultTheme;
   }
 
   public get theme() {
     return this._theme;
   }
 
-  public set theme(value) {
+  public set theme(value: Theme) {
     this._theme = value;
     this.onThemeChange?.(value);
+    this.writetToLocalStorage(value);
+  }
+
+  private writetToLocalStorage(value: Theme) {
+    localStorage.setItem(THEME_ID, value.id);
+  }
+
+  private readFromLocalStorage(): Theme {
+    const themeID = localStorage.getItem(THEME_ID);
+    const theme = themes.find((eachTheme: Theme) => themeID === eachTheme.id);
+    return theme;
+  }
+
+  public get themes(): Theme[] {
+    return themes;
   }
 }