diff --git a/.changeset/great-snakes-dress.md b/.changeset/great-snakes-dress.md
new file mode 100644
index 0000000000..404bdab03c
--- /dev/null
+++ b/.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.
diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx
index 32b0fd2708..a80e36cf35 100644
--- a/packages/theme/src/unified/UnifiedThemeProvider.tsx
+++ b/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) {