style: enhance theme dropdown and security settings with improved styles and active indicators (#6582)

packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js

@@ -13,16 +13,18 @@ const StyledWrapper = styled.div`
     transition: all 0.15s ease;
 
     &:hover {
-      background-color: ${(props) => props.theme.background.surface0};
+      opacity: 0.8;
     }
   }
 
   .safe-mode {
     color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.safeMode.color};
+    background-color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.safeMode.bg};
   }
 
   .developer-mode {
     color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.developerMode.color};
+    background-color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.developerMode.bg};
   }
 
   .sandbox-dropdown {
@@ -94,7 +96,7 @@ const StyledWrapper = styled.div`
 
   .recommended-badge {
     padding: 0.125rem 0.5rem;
-    font-size: 0.75rem;
+    font-size: ${(props) => props.theme.font.size.xs};
     background-color: ${(props) => rgba(props.theme.colors.text.green, 0.1)};
     color: ${(props) => props.theme.colors.text.green};
     border-radius: ${(props) => props.theme.border.radius.sm};

packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js

@@ -103,11 +103,23 @@ const StyledWrapper = styled.div`
   }
 
   .theme-list-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     font-size: 12px;
     color: ${(props) => props.theme.dropdown.mutedText};
     margin-bottom: 8px;
   }
 
+  .active-badge {
+    font-size: 10px;
+    font-weight: 500;
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: ${(props) => rgba(props.theme.dropdown.selectedColor, 0.12)};
+    color: ${(props) => props.theme.dropdown.selectedColor};
+  }
+
   /* Theme item */
   .theme-item {
     display: flex;

packages/bruno-app/src/components/StatusBar/ThemeDropdown/index.js

@@ -34,6 +34,7 @@ const ThemeDropdown = ({ children }) => {
   const {
     storedTheme,
     setStoredTheme,
+    displayedTheme,
     themeVariantLight,
     themeVariantDark,
     setThemeVariantLight,
@@ -209,10 +210,14 @@ const ThemeDropdown = ({ children }) => {
   const renderThemeList = (themes, isLight, currentVariant, label) => {
     const refs = isLight ? lightItemRefs : darkItemRefs;
     const section = isLight ? 'light' : 'dark';
+    const isActiveSystemTheme = isSystemMode && ((isLight && displayedTheme === 'light') || (!isLight && displayedTheme === 'dark'));
 
     return (
       <div className="theme-list" role="listbox" aria-label={label}>
-        <div className="theme-list-label">{label}</div>
+        <div className="theme-list-label">
+          {label}
+          {isActiveSystemTheme && <span className="active-badge">Active</span>}
+        </div>
         {themes.map((theme, index) => {
           const isActive = currentVariant === theme.id;
           return (
@@ -270,7 +275,7 @@ const ThemeDropdown = ({ children }) => {
         aria-label="Theme selector"
       >
         <div className="mode-section">
-          <div className="mode-label" id="mode-label">Mode</div>
+          <div className="mode-label" id="mode-label">Appearance</div>
           {renderModeButtons()}
         </div>
 

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

@@ -25,12 +25,15 @@ export const ThemeProvider = (props) => {
   };
 
   useEffect(() => {
-    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: light)');
+    const handleChange = (e) => {
       if (storedTheme !== 'system') return;
       setDisplayedTheme(e.matches ? 'light' : 'dark');
       toggleHtml();
-    });
-  }, []);
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [storedTheme]);
 
   useEffect(() => {
     const root = window.document.documentElement;