feat: improve desktop theme switching

apps/web/desktop/config/theme.js

@@ -1,17 +1,19 @@
 const storage = require("electron-data-storage").default;
+const { nativeTheme } = require("electron");
 
 function getTheme() {
   return storage.getSync("theme") || "light";
 }
 
 function setTheme(theme) {
+  nativeTheme.themeSource = theme;
+  if (global.win) global.win.setBackgroundColor(getBackgroundColor(theme));
   return storage.set("theme", theme);
 }
 
-function getBackgroundColor() {
-  const theme = getTheme();
-  console.log("THEME", theme);
-  return theme === "dark" ? "#0f0f0f" : "#fff";
+function getBackgroundColor(theme) {
+  if (!theme) theme = getTheme();
+  return theme === "dark" ? "#0f0f0f" : "#ffffff";
 }
 
 module.exports = { getTheme, setTheme, getBackgroundColor };

apps/web/desktop/electron.js

@@ -4,7 +4,7 @@ const os = require("os");
 const { isDevelopment } = require("./utils");
 const { registerProtocol, URL } = require("./protocol");
 const { configureAutoUpdater } = require("./autoupdate");
-const { getBackgroundColor } = require("./config/theme");
+const { getBackgroundColor, getTheme, setTheme } = require("./config/theme");
 const getZoomFactor = require("./ipc/calls/getZoomFactor");
 const { logger } = require("./logger");
 require("./ipc/index.js");
@@ -17,6 +17,7 @@ let mainWindow;
 async function createWindow() {
   mainWindow = new BrowserWindow({
     backgroundColor: getBackgroundColor(),
+    darkTheme: getTheme() === "dark",
     autoHideMenuBar: true,
     icon: path.join(
       __dirname,
@@ -34,6 +35,7 @@ async function createWindow() {
     },
   });
   global.win = mainWindow;
+  setTheme(getTheme());
 
   if (isDevelopment())
     mainWindow.webContents.openDevTools({ mode: "right", activate: true });

apps/web/desktop/ipc/actions/changeAppTheme.js

@@ -1,8 +1,7 @@
-const { setTheme, getBackgroundColor } = require("../../config/theme");
+const { setTheme } = require("../../config/theme");
 
 module.exports = async (args) => {
   if (!global.win) return;
   const { theme } = args;
   await setTheme(theme);
-  global.win.setBackgroundColor(getBackgroundColor());
 };