From 123c2893f3f406e8991d67db3779c3b3bad3d562 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Tue, 24 Mar 2026 12:35:09 +0530
Subject: [PATCH] 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  |  7 +++++--
 packages/bruno-electron/src/index.js             |  4 ++++
 packages/bruno-electron/src/ipc/preferences.js   |  8 +++++++-
 .../bruno-electron/src/store/window-state.js     | 16 ++++++++++++++++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/packages/bruno-app/src/providers/Theme/index.js b/packages/bruno-app/src/providers/Theme/index.js
index 06b6b7597..6d00f8a61 100644
--- a/packages/bruno-app/src/providers/Theme/index.js
+++ b/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'
diff --git a/packages/bruno-electron/src/index.js b/packages/bruno-electron/src/index.js
index 6c7de8518..e3a45931b 100644
--- a/packages/bruno-electron/src/index.js
+++ b/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,
diff --git a/packages/bruno-electron/src/ipc/preferences.js b/packages/bruno-electron/src/ipc/preferences.js
index 315baad1a..64f28c598 100644
--- a/packages/bruno-electron/src/ipc/preferences.js
+++ b/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 () => {
diff --git a/packages/bruno-electron/src/store/window-state.js b/packages/bruno-electron/src/store/window-state.js
index 425aef87e..c65d213a1 100644
--- a/packages/bruno-electron/src/store/window-state.js
+++ b/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;