From 4245944ccc5f357d83d2e1f9eead29777b8ae353 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Wed, 25 Mar 2026 15:30:24 +0530
Subject: [PATCH] fix(theme): convert theme bg to hex for Electron
 backgroundColor (#7569)

* fix(theme): convert theme bg to hex for Electron backgroundColor

* fix(theme): simplify background color conversion to hex in ThemeProvider
---
 packages/bruno-app/src/providers/Theme/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/bruno-app/src/providers/Theme/index.js b/packages/bruno-app/src/providers/Theme/index.js
index 6d00f8a61..d7db29df6 100644
--- a/packages/bruno-app/src/providers/Theme/index.js
+++ b/packages/bruno-app/src/providers/Theme/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Validator } from 'jsonschema';
 import toast from 'react-hot-toast';
+import { parseToRgb } from 'polished';
 import themes from 'themes/index';
 import themeSchema from 'themes/schema';
 import useLocalStorage from 'hooks/useLocalStorage/index';
@@ -54,7 +55,10 @@ export const ThemeProvider = (props) => {
     if (window.ipcRenderer) {
       const isLight = effectiveTheme === 'light';
       const variantName = isLight ? themeVariantLight : themeVariantDark;
-      const themeBg = themes[variantName]?.bg || (isLight ? '#ffffff' : '#1e1e1e');
+      const rawBg = themes[variantName]?.bg || (isLight ? '#ffffff' : '#1e1e1e');
+      // Convert to hex — Electron's backgroundColor only accepts hex colors
+      const { red, green, blue } = parseToRgb(rawBg);
+      const themeBg = `#${[red, green, blue].map((c) => c.toString(16).padStart(2, '0')).join('')}`;
       window.ipcRenderer.send('renderer:theme-change', storedTheme, themeBg);
     }
   }, [storedTheme, themeVariantLight, themeVariantDark]);