Add 'Sync with computer' theme option (#4973)

src/main/index.ts

@@ -56,6 +56,7 @@ import routerInjectable from "./router/router.injectable";
 import shellApiRequestInjectable from "./proxy-functions/shell-api-request/shell-api-request.injectable";
 import userStoreInjectable from "../common/user-store/user-store.injectable";
 import trayMenuItemsInjectable from "./tray/tray-menu-items.injectable";
+import { broadcastNativeThemeOnUpdate } from "./native-theme";
 
 const di = getDi();
 
@@ -109,6 +110,8 @@ di.runSetups().then(() => {
     }
   }
 
+  broadcastNativeThemeOnUpdate();
+
   app.on("second-instance", (event, argv) => {
     logger.debug("second-instance message");
 

src/main/initializers/init-ipc-main-handlers/init-ipc-main-handlers.ts

@@ -24,6 +24,8 @@ import { onLocationChange, handleWindowAction } from "../../ipc/window";
 import { openFilePickingDialogChannel } from "../../../common/ipc/dialog";
 import { showOpenDialog } from "../../ipc/dialog";
 import { windowActionHandleChannel, windowLocationChangedChannel, windowOpenAppMenuAsContextMenuChannel } from "../../../common/ipc/window";
+import { getNativeColorTheme } from "../../native-theme";
+import { getNativeThemeChannel } from "../../../common/ipc/native-theme";
 
 interface Dependencies {
   electronMenuItems: IComputedValue<MenuRegistration[]>;
@@ -158,4 +160,8 @@ export const initIpcMainHandlers = ({ electronMenuItems, directoryForLensLocalSt
       y: 20,
     });
   });
+
+  ipcMainHandle(getNativeThemeChannel, () => {
+    return getNativeColorTheme();
+  });
 };

src/main/native-theme.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { nativeTheme } from "electron";
+import { broadcastMessage } from "../common/ipc";
+import { setNativeThemeChannel } from "../common/ipc/native-theme";
+
+export function broadcastNativeThemeOnUpdate() {
+  nativeTheme.on("updated", () => {
+    broadcastMessage(setNativeThemeChannel, getNativeColorTheme());
+  });
+}
+
+export function getNativeColorTheme() {
+  return nativeTheme.shouldUseDarkColors ? "dark" : "light";
+}