feat: Set nativeTheme theme source on dark mode

4 files changed, 90 insertions, 11 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> {}