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

src/renderer/components/+catalog/catalog.test.tsx

@@ -41,6 +41,10 @@ jest.mock("electron", () => ({
     on: jest.fn(),
     handle: jest.fn(),
   },
+  ipcRenderer: {
+    on: jest.fn(),
+    invoke: jest.fn(),
+  },
 }));
 
 jest.mock("./hotbar-toggle-menu-item", () => ({

src/renderer/components/+preferences/application.tsx

@@ -45,7 +45,10 @@ const NonInjectedApplication: React.FC<Dependencies> = ({ appPreferenceItems })
       <section id="appearance">
         <SubTitle title="Theme" />
         <Select
-          options={themeStore.themeOptions}
+          options={[
+            { label: "Sync with computer", value: "system" },
+            ...themeStore.themeOptions,
+          ]}
           value={userStore.colorTheme}
           onChange={({ value }) => userStore.colorTheme = value}
           themeName="lens"

src/renderer/components/dock/__test__/dock-tabs.test.tsx

@@ -33,6 +33,10 @@ jest.mock("electron", () => ({
     on: jest.fn(),
     handle: jest.fn(),
   },
+  ipcRenderer: {
+    on: jest.fn(),
+    invoke: jest.fn(),
+  },
 }));
 
 const initialTabs: DockTab[] = [

src/renderer/components/dock/logs/__test__/log-resource-selector.test.tsx

@@ -36,6 +36,10 @@ jest.mock("electron", () => ({
     on: jest.fn(),
     handle: jest.fn(),
   },
+  ipcRenderer: {
+    on: jest.fn(),
+    invoke: jest.fn(),
+  },
 }));
 
 function mockLogTabViewModel(tabId: TabId, deps: Partial<LogTabViewModelDependencies>): LogTabViewModel {

src/renderer/components/hotbar/__tests__/hotbar-remove-command.test.tsx

@@ -26,6 +26,13 @@ const mockHotbars: { [id: string]: any } = {
   },
 };
 
+jest.mock("electron", () => ({
+  ipcRenderer: {
+    on: jest.fn(),
+    invoke: jest.fn(),
+  },
+}));
+
 describe("<HotbarRemoveCommand />", () => {
   let di: DiContainer;
   let render: DiRender;

src/renderer/components/select/select.test.tsx

@@ -17,6 +17,12 @@ import rendererExtensionsInjectable from "../../../extensions/renderer-extension
 import { computed } from "mobx";
 import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
 
+jest.mock("electron", () => ({
+  ipcRenderer: {
+    on: jest.fn(),
+    invoke: jest.fn(),
+  },
+}));
 
 describe("<Select />", () => {
   let di: DiContainer;

src/renderer/theme.store.ts

@@ -13,6 +13,8 @@ import type { SelectOption } from "./components/select";
 import type { MonacoEditorProps } from "./components/monaco-editor";
 import { defaultTheme } from "../common/vars";
 import { camelCase } from "lodash";
+import { ipcRenderer } from "electron";
+import { getNativeThemeChannel, setNativeThemeChannel } from "../common/ipc/native-theme";
 
 export type ThemeId = string;
 
@@ -34,6 +36,8 @@ export class ThemeStore extends Singleton {
     "lens-light": lensLightThemeJson as Theme,
   });
 
+  @observable osNativeTheme: "dark" | "light" | undefined;
+
   @computed get activeThemeId(): ThemeId {
     return UserStore.getInstance().colorTheme;
   }
@@ -43,7 +47,7 @@ export class ThemeStore extends Singleton {
   }
 
   @computed get activeTheme(): Theme {
-    return this.themes.get(this.activeThemeId) ?? this.themes.get(defaultTheme);
+    return this.systemTheme ?? this.themes.get(this.activeThemeId) ?? this.themes.get(defaultTheme);
   }
 
   @computed get terminalColors(): [string, string][] {
@@ -72,11 +76,25 @@ export class ThemeStore extends Singleton {
     }));
   }
 
+  @computed get systemTheme() {
+    if (this.activeThemeId == "system" && this.osNativeTheme) {
+      return this.themes.get(`lens-${this.osNativeTheme}`);
+    }
+
+    return null;
+  }
+
   constructor() {
     super();
 
     makeObservable(this);
     autoBind(this);
+    this.init();
+  }
+
+  async init() {
+    await this.setNativeTheme();
+    this.bindNativeThemeUpdateEvent();
 
     // auto-apply active theme
     reaction(() => ({
@@ -95,12 +113,26 @@ export class ThemeStore extends Singleton {
     });
   }
 
+  bindNativeThemeUpdateEvent() {
+    ipcRenderer.on(setNativeThemeChannel, (event, theme: "dark" | "light") => {
+      this.osNativeTheme = theme;
+      this.applyTheme(theme);
+    });
+  }
+
+  async setNativeTheme() {
+    const theme: "dark" | "light" = await ipcRenderer.invoke(getNativeThemeChannel);
+
+    this.osNativeTheme = theme;
+  }
+
   getThemeById(themeId: ThemeId): Theme {
     return this.themes.get(themeId);
   }
 
   protected applyTheme(themeId: ThemeId) {
-    const theme = this.getThemeById(themeId);
+    const theme = this.systemTheme ?? this.getThemeById(themeId);
+
     const colors = Object.entries({
       ...theme.colors,
       ...Object.fromEntries(this.terminalColors),