refactor: use setBackgroundColor instead of CSS

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

3 files changed, 17 insertions, 30 deletions

diff --git a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
index c4b3823..f1e3c7e 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronMainWindow.ts
@@ -25,9 +25,11 @@ import {
   Translation,
 } from '@sophie/shared';
 import { BrowserWindow, ipcMain, IpcMainEvent } from 'electron';
+import { reaction } from 'mobx';
 import type { IJsonPatch } from 'mobx-state-tree';
 
 import type MainStore from '../../../stores/MainStore.js';
+import Disposer from '../../../utils/Disposer.js';
 import getLogger from '../../../utils/getLogger.js';
 import RendererBridge from '../RendererBridge.js';
 import type { MainWindow, ServiceView } from '../types.js';
@@ -39,6 +41,10 @@ import lockWebContentsToFile from './lockWebContentsToFile.js';
 
 const log = getLogger('ElectronMainWindow');
 
+function getBackroundColor(useDarkTheme: boolean): string {
+  return useDarkTheme ? '#121212' : '#FFF';
+}
+
 export default class ElectronMainWindow implements MainWindow {
   private readonly browserWindow: BrowserWindow;
 
@@ -66,6 +72,8 @@ export default class ElectronMainWindow implements MainWindow {
     }
   };
 
+  private readonly disposeBackgroundColorReaction: Disposer;
+
   constructor(
     private readonly store: MainStore,
     private readonly parent: ElectronViewFactory,
@@ -74,6 +82,7 @@ export default class ElectronMainWindow implements MainWindow {
       show: false,
       autoHideMenuBar: true,
       darkTheme: store.shared.shouldUseDarkColors,
+      backgroundColor: getBackroundColor(store.shared.shouldUseDarkColors),
       webPreferences: {
         sandbox: true,
         devTools: parent.devMode,
@@ -126,6 +135,13 @@ export default class ElectronMainWindow implements MainWindow {
 
     webContents.userAgent = parent.userAgents.mainWindowUserAgent;
 
+    this.disposeBackgroundColorReaction = reaction(
+      () => store.shared.shouldUseDarkColors,
+      (useDarkTheme) => {
+        this.browserWindow.setBackgroundColor(getBackroundColor(useDarkTheme));
+      },
+    );
+
     this.browserWindow.on('ready-to-show', () => this.browserWindow.show());
 
     this.browserWindow.on('close', () => this.dispose());
@@ -171,6 +187,7 @@ export default class ElectronMainWindow implements MainWindow {
 
   dispose() {
     this.bridge.dispose();
+    this.disposeBackgroundColorReaction();
     this.browserWindow.destroy();
     ipcMain.removeHandler(RendererToMainIpcMessage.GetSharedStoreSnapshot);
     ipcMain.removeListener(
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 32fcee6..f1e8542 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -24,7 +24,6 @@ import { addDisposer } from 'mobx-state-tree';
 import React, { Suspense, lazy } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import './style.css';
 import Loading from './components/Loading.js';
 import ThemeProvider from './components/ThemeProvider.js';
 import { exposeToReduxDevtools, hotReload } from './devTools.js';
diff --git a/packages/renderer/src/style.css b/packages/renderer/src/style.css
deleted file mode 100644
index d0bf2fb..0000000
--- a/packages/renderer/src/style.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright (C)  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
- */
-
-body {
-  background-color: #fff;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #121212;
-  }
-}