Merge pull request #30614 from backstage/bui-theme-attributes

Add data attributes for BUI

.changeset/great-snakes-dress.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+We are introducing two new data attributes on the `body` to support Backstage UI (BUI) new theming system.

packages/theme/src/unified/UnifiedThemeProvider.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import {
   ThemeProvider,
@@ -70,6 +70,18 @@ export function UnifiedThemeProvider(
 
   const v4Theme = theme.getTheme('v4') as Mui4Theme;
   const v5Theme = theme.getTheme('v5') as Mui5Theme;
+  const themeMode = v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode;
+  const themeName = 'backstage';
+
+  useEffect(() => {
+    document.body.setAttribute('data-theme-mode', themeMode);
+    document.body.setAttribute('data-theme-name', themeName);
+
+    return () => {
+      document.body.removeAttribute('data-theme-mode');
+      document.body.removeAttribute('data-theme-name');
+    };
+  }, [themeMode, themeName]);
 
   let cssBaseline: JSX.Element | undefined = undefined;
   if (!noCssBaseline) {