From 79d88e534e66ac05b278793134c2d6d14cc46862 Mon Sep 17 00:00:00 2001
From: Aditya Kumar <aditya.kumar60@infosys.com>
Date: Wed, 8 Apr 2026 09:15:21 +0530
Subject: [PATCH] Making suggested changes

Signed-off-by: Aditya Kumar <aditya.kumar60@infosys.com>
---
 .changeset/purple-insects-cross.md            |  7 -------
 .../Content/ConfigContent/ConfigContent.tsx   | 19 ++++++++++++++-----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/.changeset/purple-insects-cross.md b/.changeset/purple-insects-cross.md
index b0d08b62a3..d0371e18ed 100644
--- a/.changeset/purple-insects-cross.md
+++ b/.changeset/purple-insects-cross.md
@@ -3,10 +3,3 @@
 ---
 
 Migrated `ConfigContent` component from Material UI to Backstage UI (BUI).
-
-Replaced MUI components with their BUI equivalents:
-
-- `Box`, `Paper` → `Box` with `bg` and `p` props
-- `Typography` → `Text` with `as="p"`
-- `Alert` → `Alert` with `status` and `title` props
-- Removed `makeStyles`/`createStyles` in favor of BUI spacing props
diff --git a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx
index 868dab2353..bb5902c7ac 100644
--- a/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx
+++ b/plugins/devtools/src/components/Content/ConfigContent/ConfigContent.tsx
@@ -15,8 +15,9 @@
  */
 
 import { Progress, WarningPanel } from '@backstage/core-components';
+import { appThemeApiRef, useApi } from '@backstage/core-plugin-api';
 import { Alert, Box, Text } from '@backstage/ui';
-import { useTheme } from '@material-ui/core/styles';
+import useObservable from 'react-use/esm/useObservable';
 import ReactJson from 'react-json-view';
 import { useConfig } from '../../../hooks';
 import { ConfigError } from '@backstage/plugin-devtools-common';
@@ -41,17 +42,25 @@ export const WarningContent = ({ error }: { error: ConfigError }) => {
 
 /** @public */
 export const ConfigContent = () => {
-  const theme = useTheme();
+  const appThemeApi = useApi(appThemeApiRef);
+  const activeThemeId = useObservable(
+    appThemeApi.activeThemeId$(),
+    appThemeApi.getActiveThemeId(),
+  );
+  const activeTheme = appThemeApi
+    .getInstalledThemes()
+    .find(t => t.id === activeThemeId);
+  const isDark = activeTheme?.variant === 'dark';
   const { configInfo, loading, error } = useConfig();
 
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert status="danger" title={error.message} />;
+    return <Alert status="danger" description={error.message} />;
   }
 
   if (!configInfo) {
-    return <Alert status="danger" title="Unable to load config data" />;
+    return <Alert status="danger" description="Unable to load config data" />;
   }
 
   return (
@@ -68,7 +77,7 @@ export const ConfigContent = () => {
           src={configInfo.config as object}
           name="config"
           enableClipboard={false}
-          theme={theme.palette.type === 'dark' ? 'chalk' : 'rjv-default'}
+          theme={isDark ? 'chalk' : 'rjv-default'}
         />
       </Box>
     </Box>