feat: Set nativeTheme theme source on dark mode

12 files changed, 157 insertions, 29 deletions

diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index a135902..6a8a74e 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -23,6 +23,7 @@ import {
   BrowserView,
   BrowserWindow,
   ipcMain,
+  nativeTheme,
 } from 'electron';
 import { readFile, readFileSync } from 'fs';
 import { autorun } from 'mobx';
@@ -36,7 +37,7 @@ import {
 import {
   browserViewBounds,
   MainToRendererIpcMessage,
-  paletteMode,
+  themeSource,
   RendererToMainIpcMessage,
 } from '@sophie/shared';
 import { URL } from 'url';
@@ -104,6 +105,15 @@ let mainWindow: BrowserWindow | null = null;
 
 const store = createRootStore();
 
+autorun(() => {
+  nativeTheme.themeSource = store.config.themeSource;
+});
+
+store.setShouldUseDarkColors(nativeTheme.shouldUseDarkColors);
+nativeTheme.on('updated', () => {
+  store.setShouldUseDarkColors(nativeTheme.shouldUseDarkColors);
+});
+
 const rendererBaseUrl = getResourceUrl('../renderer/');
 function shouldCancelMainWindowRequest(url: string, method: string): boolean {
   if (method !== 'GET') {
@@ -191,8 +201,8 @@ function createWindow(): Promise<unknown> {
         case RendererToMainIpcMessage.SetBrowserViewBounds:
           store.setBrowserViewBounds(browserViewBounds.parse(args[0]));
           break;
-        case RendererToMainIpcMessage.SetPaletteMode:
-          store.setPaletteMode(paletteMode.parse(args[0]))
+        case RendererToMainIpcMessage.SetThemeSource:
+          store.config.setThemeSource(themeSource.parse(args[0]))
           break;
         case RendererToMainIpcMessage.ReloadAllServices:
           readFile(serviceInjectPath, 'utf8', (err, data) => {
diff --git a/packages/main/src/stores/Config.ts b/packages/main/src/stores/Config.ts
new file mode 100644
index 0000000..483a491
--- /dev/null
+++ b/packages/main/src/stores/Config.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Instance } from 'mobx-state-tree';
+import { config as originalConfig, ThemeSource } from '@sophie/shared';
+
+export type { ConfigSnapshotIn, ConfigSnapshotOut } from '@sophie/shared';
+
+export const config = originalConfig.actions((self) => ({
+  setThemeSource(mode: ThemeSource) {
+    self.themeSource = mode;
+  },
+}));
+
+export interface Config extends Instance<typeof config> {}
diff --git a/packages/main/src/stores/RootStore.ts b/packages/main/src/stores/RootStore.ts
index c09cd4a..31e2b71 100644
--- a/packages/main/src/stores/RootStore.ts
+++ b/packages/main/src/stores/RootStore.ts
@@ -22,25 +22,30 @@ import { applySnapshot, Instance, types } from 'mobx-state-tree';
 import {
   BrowserViewBounds,
   emptySharedStore,
-  PaletteMode,
-  sharedStore,
 } from '@sophie/shared';
 
+import type { Config } from './Config';
+import { sharedStore } from './SharedStore';
+
 export const rootStore = types.model('RootStore', {
-  browserViewBounds: types.model("BrowserViewBoundsStore", {
+  browserViewBounds: types.model('BrowserViewBounds', {
     x: 0,
     y: 0,
     width: 0,
     height: 0,
   }),
   shared: sharedStore,
-}).actions((self) => ({
-  setBrowserViewBounds(bounds: BrowserViewBounds) {
-    applySnapshot(self.browserViewBounds, bounds);
+}).views((self) => ({
+  get config(): Config {
+    return self.shared.config;
   },
-  setPaletteMode(mode: PaletteMode) {
-    self.shared.shouldUseDarkColors = mode === 'dark';
+})).actions((self) => ({
+  setBrowserViewBounds(bounds: BrowserViewBounds): void {
+    applySnapshot(self.browserViewBounds, bounds);
   },
+  setShouldUseDarkColors(shouldUseDarkColors: boolean): void {
+    self.shared.shouldUseDarkColors = shouldUseDarkColors;
+  }
 }));
 
 export interface RootStore extends Instance<typeof rootStore> {}
diff --git a/packages/main/src/stores/SharedStore.ts b/packages/main/src/stores/SharedStore.ts
new file mode 100644
index 0000000..04dda32
--- /dev/null
+++ b/packages/main/src/stores/SharedStore.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Instance } from 'mobx-state-tree';
+import { sharedStore as originalSharedStore } from '@sophie/shared';
+
+import { config } from './Config';
+
+export type { SharedStoreSnapshotIn, SharedStoreSnapshotOut } from '@sophie/shared';
+
+export const sharedStore = originalSharedStore.props({
+  config,
+});
+
+export interface SharedStore extends Instance<typeof sharedStore> {}
diff --git a/packages/preload/src/SophieRendererImpl.ts b/packages/preload/src/SophieRendererImpl.ts
index bd0f6cb..a06433f 100644
--- a/packages/preload/src/SophieRendererImpl.ts
+++ b/packages/preload/src/SophieRendererImpl.ts
@@ -24,13 +24,13 @@ import {
   BrowserViewBounds,
   browserViewBounds,
   MainToRendererIpcMessage,
-  PaletteMode,
-  paletteMode,
   RendererToMainIpcMessage,
   sharedStore,
   SharedStoreListener,
   SharedStoreSnapshotIn,
   SophieRenderer,
+  themeSource,
+  ThemeSource,
 } from '@sophie/shared';
 
 export type MessageSender = (channel: RendererToMainIpcMessage, ...args: unknown[]) => void;
@@ -81,9 +81,9 @@ export class SophieRendererImpl implements SophieRenderer {
     }
   }
 
-  setPaletteMode(mode: PaletteMode): void {
-    if (paletteMode.safeParse(mode).success) {
-      this.#send(RendererToMainIpcMessage.SetPaletteMode, mode);
+  setThemeSource(mode: ThemeSource): void {
+    if (themeSource.safeParse(mode).success) {
+      this.#send(RendererToMainIpcMessage.SetThemeSource, mode);
     }
   }
 
@@ -106,7 +106,7 @@ export function createSophieRenderer(): SophieRenderer {
   return {
     setSharedStoreListener: impl.setSharedStoreListener.bind(impl),
     setBrowserViewBounds: impl.setBrowserViewBounds.bind(impl),
-    setPaletteMode: impl.setPaletteMode.bind(impl),
+    setThemeSource: impl.setThemeSource.bind(impl),
     reloadAllServices: impl.reloadAllServices.bind(impl),
   };
 }
diff --git a/packages/renderer/src/stores/RootStore.ts b/packages/renderer/src/stores/RootStore.ts
index c6533ba..20e0afa 100644
--- a/packages/renderer/src/stores/RootStore.ts
+++ b/packages/renderer/src/stores/RootStore.ts
@@ -29,9 +29,9 @@ import {
 import {
   BrowserViewBounds,
   emptySharedStore,
-  PaletteMode,
   sharedStore,
   SophieRenderer,
+  ThemeSource,
 } from '@sophie/shared';
 
 export interface RootEnv {
@@ -55,14 +55,14 @@ export const rootStore = types.model('RootStore', {
   setBrowserViewBounds(bounds: BrowserViewBounds) {
     getEnv(self).ipc.setBrowserViewBounds(bounds);
   },
-  setPaletteMode(mode: PaletteMode) {
-    getEnv(self).ipc.setPaletteMode(mode);
+  setThemeSource(mode: ThemeSource) {
+    getEnv(self).ipc.setThemeSource(mode);
   },
   toggleDarkMode() {
     if (self.shared.shouldUseDarkColors) {
-      this.setPaletteMode('light');
+      this.setThemeSource('light');
     } else {
-      this.setPaletteMode('dark');
+      this.setThemeSource('dark');
     }
   },
 }));
diff --git a/packages/shared/src/contextBridge/SophieRenderer.ts b/packages/shared/src/contextBridge/SophieRenderer.ts
index e310829..6a2e432 100644
--- a/packages/shared/src/contextBridge/SophieRenderer.ts
+++ b/packages/shared/src/contextBridge/SophieRenderer.ts
@@ -20,14 +20,14 @@
 
 import { SharedStoreListener } from '../stores/SharedStore';
 
-import { BrowserViewBounds, PaletteMode } from '../schemas';
+import { BrowserViewBounds, ThemeSource } from '../schemas';
 
 export interface SophieRenderer {
   setSharedStoreListener(listener: SharedStoreListener): void;
 
   setBrowserViewBounds(bounds: BrowserViewBounds): void;
 
-  setPaletteMode(mode: PaletteMode): void;
+  setThemeSource(mode: ThemeSource): void;
 
   reloadAllServices(): void;
 }
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index f054571..046d28d 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -27,13 +27,16 @@ export {
 
 export type {
   BrowserViewBounds,
-  PaletteMode,
+  ThemeSource,
 } from './schemas';
 export {
   browserViewBounds,
-  paletteMode
+  themeSource,
 } from './schemas';
 
+export type { Config, ConfigSnapshotIn, ConfigSnapshotOut } from './stores/Config';
+export { config, defaultConfig } from './stores/Config';
+
 export type {
   SharedStore,
   SharedStoreListener,
diff --git a/packages/shared/src/ipc.ts b/packages/shared/src/ipc.ts
index 2e35d7a..d2f65f7 100644
--- a/packages/shared/src/ipc.ts
+++ b/packages/shared/src/ipc.ts
@@ -26,6 +26,6 @@ export enum MainToRendererIpcMessage {
 export enum RendererToMainIpcMessage {
   SharedStoreSnapshotRequest = 'sophie-renderer-to-main:shared-store-snapshot-request',
   SetBrowserViewBounds = 'sophie-renderer-to-main:set-browser-view-bounds',
-  SetPaletteMode = 'sophie-renderer-to-main:set-palette-mode',
+  SetThemeSource = 'sophie-renderer-to-main:set-theme-source',
   ReloadAllServices = 'sophie-renderer-to-main:reload-all-services',
 }
diff --git a/packages/shared/src/schemas.ts b/packages/shared/src/schemas.ts
index 8827467..0eff581 100644
--- a/packages/shared/src/schemas.ts
+++ b/packages/shared/src/schemas.ts
@@ -29,6 +29,6 @@ export const browserViewBounds = z.object({
 
 export type BrowserViewBounds = z.infer<typeof browserViewBounds>;
 
-export const paletteMode = z.enum(['light', 'dark']);
+export const themeSource = z.enum(['system', 'light', 'dark']);
 
-export type PaletteMode = z.infer<typeof paletteMode>;
+export type ThemeSource = z.infer<typeof themeSource>;
diff --git a/packages/shared/src/stores/Config.ts b/packages/shared/src/stores/Config.ts
new file mode 100644
index 0000000..1a9f924
--- /dev/null
+++ b/packages/shared/src/stores/Config.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import {
+  Instance,
+  types,
+  SnapshotIn,
+  SnapshotOut,
+} from 'mobx-state-tree';
+
+import { themeSource } from '../schemas';
+
+export const config = types.model("Config", {
+  themeSource: types.enumeration(themeSource.options),
+});
+
+export const defaultConfig: ConfigSnapshotIn = {
+  themeSource: 'system',
+};
+
+export interface Config extends Instance<typeof config> {}
+
+export interface ConfigSnapshotIn extends SnapshotIn<typeof config> {}
+
+export interface ConfigSnapshotOut extends SnapshotOut<typeof config> {}
diff --git a/packages/shared/src/stores/SharedStore.ts b/packages/shared/src/stores/SharedStore.ts
index 9c7d5ad..9f0afb1 100644
--- a/packages/shared/src/stores/SharedStore.ts
+++ b/packages/shared/src/stores/SharedStore.ts
@@ -26,11 +26,15 @@ import {
   SnapshotOut,
 } from 'mobx-state-tree';
 
+import { config, defaultConfig } from './Config';
+
 export const sharedStore = types.model("SharedStore", {
+  config,
   shouldUseDarkColors: true,
 });
 
 export const emptySharedStore: SharedStoreSnapshotIn = {
+  config: defaultConfig,
 };
 
 export interface SharedStore extends Instance<typeof sharedStore> {}