feat(theme): enhance theme management with background color support (#7454)

- Updated ThemeProvider to send background color along with theme changes to the renderer.
- Introduced WindowStateStore methods for managing theme mode and background color.
- Set the main window's background color based on the stored theme during app initialization.

This improves the user experience by ensuring the application reflects the selected theme accurately.

packages/bruno-app/src/providers/Theme/index.js

@@ -52,9 +52,12 @@ export const ThemeProvider = (props) => {
     applyThemeToRoot(effectiveTheme);
 
     if (window.ipcRenderer) {
-      window.ipcRenderer.send('renderer:theme-change', storedTheme);
+      const isLight = effectiveTheme === 'light';
+      const variantName = isLight ? themeVariantLight : themeVariantDark;
+      const themeBg = themes[variantName]?.bg || (isLight ? '#ffffff' : '#1e1e1e');
+      window.ipcRenderer.send('renderer:theme-change', storedTheme, themeBg);
     }
-  }, [storedTheme]);
+  }, [storedTheme, themeVariantLight, themeVariantDark]);
 
   // storedTheme can have 3 values: 'light', 'dark', 'system'
   // displayedTheme can have 2 values: 'light', 'dark'

packages/bruno-electron/src/index.js

@@ -203,6 +203,9 @@ app.on('ready', async () => {
 
   Menu.setApplicationMenu(menu);
   const { maximized, x, y, width, height } = loadWindowState();
+  const WindowStateStore = require('./store/window-state');
+  const windowStateStore = new WindowStateStore();
+  const themeBg = windowStateStore.getThemeBg();
 
   mainWindow = new BrowserWindow({
     x,
@@ -212,6 +215,7 @@ app.on('ready', async () => {
     minWidth: 700,
     minHeight: 400,
     show: false,
+    backgroundColor: themeBg,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: true,

packages/bruno-electron/src/ipc/preferences.js

@@ -7,6 +7,7 @@ const { getCachedSystemProxy, fetchSystemProxy } = require('../store/system-prox
 const { resolveDefaultLocation } = require('../utils/default-location');
 const onboardUser = require('../app/onboarding');
 const LastOpenedCollections = require('../store/last-opened-collections');
+const WindowStateStore = require('../store/window-state');
 const { clearAgentCache } = require('@usebruno/requests');
 
 const registerPreferencesIpc = (mainWindow) => {
@@ -66,8 +67,13 @@ const registerPreferencesIpc = (mainWindow) => {
     }
   });
 
-  ipcMain.on('renderer:theme-change', (event, theme) => {
+  ipcMain.on('renderer:theme-change', (event, theme, themeBg) => {
     nativeTheme.themeSource = theme;
+    const windowStateStore = new WindowStateStore();
+    windowStateStore.setThemeMode(theme);
+    if (themeBg) {
+      windowStateStore.setThemeBg(themeBg);
+    }
   });
 
   ipcMain.handle('renderer:get-system-proxy-variables', async () => {

packages/bruno-electron/src/store/window-state.js

@@ -35,6 +35,22 @@ class WindowStateStore {
   setMaximized(isMaximized) {
     this.store.set('maximized', isMaximized);
   }
+
+  getThemeMode() {
+    return this.store.get('themeMode') || 'system';
+  }
+
+  setThemeMode(mode) {
+    this.store.set('themeMode', mode);
+  }
+
+  getThemeBg() {
+    return this.store.get('themeBg') || '#ffffff';
+  }
+
+  setThemeBg(bg) {
+    this.store.set('themeBg', bg);
+  }
 }
 
 module.exports = WindowStateStore;