feat: add Observable to theme service

src/services/theme/hooks.ts

@@ -0,0 +1,9 @@
+import { useObservable } from 'beautiful-react-hooks';
+import { useState } from 'react';
+import { ITheme } from './interface';
+
+export function useThemeObservable(): ITheme | undefined {
+  const [theme, themeSetter] = useState<ITheme | undefined>();
+  useObservable<ITheme | undefined>(window.observables.theme.theme$, themeSetter);
+  return theme;
+}

src/services/theme/index.ts

@@ -1,3 +1,4 @@
+import { BehaviorSubject } from 'rxjs';
 import { nativeTheme } from 'electron';
 import { injectable } from 'inversify';
 
@@ -12,9 +13,16 @@ import { IViewService } from '@services/view/interface';
 export class ThemeService implements IThemeService {
   @lazyInject(serviceIdentifier.Preference) private readonly preferenceService!: IPreferenceService;
   @lazyInject(serviceIdentifier.View) private readonly viewService!: IViewService;
+  public theme$: BehaviorSubject<ITheme>;
 
   constructor() {
     this.init();
+    this.theme$ = new BehaviorSubject<ITheme>({ shouldUseDarkColors: this.shouldUseDarkColors() });
+    this.theme$.subscribe((theme: ITheme) => console.log(theme));
+  }
+
+  private updateThemeSubject(newTheme: ITheme): void {
+    this.theme$.next(newTheme);
   }
 
   private init(): void {

src/services/theme/interface.ts

@@ -1,15 +1,22 @@
+import { BehaviorSubject } from 'rxjs';
 import { ProxyPropertyType } from '@/helpers/electron-ipc-proxy/common';
 import { ThemeChannel } from '@/constants/channels';
 
+export interface ITheme {
+  shouldUseDarkColors: boolean;
+}
+
 /**
  * Wrap call to electron api, so we won't need remote module in renderer process
  */
 export interface IThemeService {
+  theme$: BehaviorSubject<ITheme>;
   shouldUseDarkColors(): boolean;
 }
 export const ThemeServiceIPCDescriptor = {
   channel: ThemeChannel.name,
   properties: {
+    theme$: ProxyPropertyType.Value$,
     shouldUseDarkColors: ProxyPropertyType.Function,
   },
 };