Merge pull request #31485 from gaelgoth/add-themeid-context

Use theme ID context instead default 'backstage' value

.changeset/slick-books-sleep.md

@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Added a `themeName` prop to `UnifiedThemeProvider`, enabling Backstage UI `data-theme-name` CSS attribute to be set based on active theme.

packages/theme/report.api.md

@@ -460,5 +460,6 @@ export interface UnifiedThemeProviderProps {
   children: ReactNode;
   // (undocumented)
   theme: UnifiedTheme;
+  themeName?: string;
 }
 ```

packages/theme/src/unified/UnifiedThemeProvider.test.tsx

@@ -20,11 +20,17 @@ import {
 } from '@material-ui/core/styles';
 import { useTheme as useV5Theme } from '@mui/material/styles';
 import { makeStyles as makeV5Styles } from '@mui/styles';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { UnifiedThemeProvider } from './UnifiedThemeProvider';
 import { themes } from './themes';
 
 describe('UnifiedThemeProvider', () => {
+  afterEach(() => {
+    document.body.removeAttribute('data-theme-name');
+    document.body.removeAttribute('data-theme-mode');
+    document.body.removeAttribute('data-unified-theme-stack');
+  });
+
   it('provides a themes for v4 and v5 directly', () => {
     function MyV4Component() {
       const theme = useV4Theme();
@@ -81,4 +87,17 @@ describe('UnifiedThemeProvider', () => {
       'rgb(158, 158, 158)',
     );
   });
+
+  it('applies theme attributes based on the provided options', async () => {
+    render(
+      <UnifiedThemeProvider theme={themes.light} themeName="aperture">
+        <span>theme</span>
+      </UnifiedThemeProvider>,
+    );
+
+    await waitFor(() =>
+      expect(document.body.getAttribute('data-theme-name')).toBe('aperture'),
+    );
+    expect(document.body.getAttribute('data-theme-mode')).toBe('light');
+  });
 });

packages/theme/src/unified/UnifiedThemeProvider.tsx

@@ -37,6 +37,8 @@ import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material
 export interface UnifiedThemeProviderProps {
   children: ReactNode;
   theme: UnifiedTheme;
+  /** Optional override for the value written to the `data-theme-name` attribute. */
+  themeName?: string;
 }
 
 /**
@@ -66,15 +68,14 @@ import { useApplyThemeAttributes } from './useApplyThemeAttributes';
 export function UnifiedThemeProvider(
   props: UnifiedThemeProviderProps,
 ): JSX.Element {
-  const { children, theme } = props;
+  const { children, theme, themeName } = props;
 
   const v4Theme = theme.getTheme('v4') as Mui4Theme;
   const v5Theme = theme.getTheme('v5') as Mui5Theme;
 
-  useApplyThemeAttributes(
-    v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode,
-    'backstage',
-  );
+  const themeMode = v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode;
+
+  useApplyThemeAttributes(themeMode, themeName ?? 'backstage');
 
   let result = children as JSX.Element;