Get native theme through IPC not remote

ts/context/NativeThemeListener.ts

@@ -0,0 +1,48 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+/* eslint-disable no-restricted-syntax */
+
+import { NativeThemeState } from '../types/NativeThemeNotifier.d';
+
+export type Callback = (change: NativeThemeState) => void;
+
+export interface MinimalIPC {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sendSync(channel: string): any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  on(channel: string, listener: (event: unknown, ...args: any[]) => void): this;
+}
+
+export type SystemThemeHolder = { systemTheme: 'dark' | 'light' };
+
+export class NativeThemeListener {
+  private readonly subscribers = new Array<Callback>();
+
+  public theme: NativeThemeState;
+
+  constructor(ipc: MinimalIPC, private readonly holder: SystemThemeHolder) {
+    this.theme = ipc.sendSync('native-theme:init');
+    this.update();
+
+    ipc.on(
+      'native-theme:changed',
+      (_event: unknown, change: NativeThemeState) => {
+        this.theme = change;
+        this.update();
+
+        for (const fn of this.subscribers) {
+          fn(change);
+        }
+      }
+    );
+  }
+
+  public subscribe(fn: Callback): void {
+    this.subscribers.push(fn);
+  }
+
+  private update(): void {
+    this.holder.systemTheme = this.theme.shouldUseDarkColors ? 'dark' : 'light';
+  }
+}

ts/context/index.ts

@@ -2,7 +2,14 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { Bytes } from './Bytes';
+import { NativeThemeListener, MinimalIPC } from './NativeThemeListener';
 
 export class Context {
   public readonly bytes = new Bytes();
+
+  public readonly nativeThemeListener;
+
+  constructor(ipc: MinimalIPC) {
+    this.nativeThemeListener = new NativeThemeListener(ipc, window);
+  }
 }