Use theme ID context instead default 'backstage' value

Signed-off-by: gaelgoth <gothuey.gael@gmail.com>

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

@@ -20,11 +20,20 @@ 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 { UnifiedThemeProvider } from './UnifiedThemeProvider';
+import { render, screen, waitFor } from '@testing-library/react';
+import {
+  UnifiedThemeProvider,
+  AppThemeIdContext,
+} 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 +90,19 @@ describe('UnifiedThemeProvider', () => {
       'rgb(158, 158, 158)',
     );
   });
+
+  it('applies theme attributes based on the provided theme id', async () => {
+    render(
+      <AppThemeIdContext.Provider value="aperture">
+        <UnifiedThemeProvider theme={themes.light}>
+          <span>theme</span>
+        </UnifiedThemeProvider>
+      </AppThemeIdContext.Provider>,
+    );
+
+    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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ReactNode } from 'react';
+import { ReactNode, createContext, useContext } from 'react';
 import {
   ThemeProvider,
   StylesProvider,
@@ -29,6 +29,8 @@ import {
 import { UnifiedTheme } from './types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
 
+export const AppThemeIdContext = createContext<string | undefined>(undefined);
+
 /**
  * Props for {@link UnifiedThemeProvider}.
  *
@@ -71,10 +73,10 @@ export function UnifiedThemeProvider(
   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;
+  const themeId = useContext(AppThemeIdContext) ?? 'backstage';
+
+  useApplyThemeAttributes(themeMode, themeId);
 
   let result = children as JSX.Element;
 

packages/theme/src/unified/index.ts

@@ -18,6 +18,9 @@ export { transformV5ComponentThemesToV4 } from './overrides';
 export { createUnifiedTheme, createUnifiedThemeFromV4 } from './UnifiedTheme';
 export type { UnifiedThemeOptions } from './UnifiedTheme';
 export { themes } from './themes';
-export { UnifiedThemeProvider } from './UnifiedThemeProvider';
+export {
+  UnifiedThemeProvider,
+  AppThemeIdContext,
+} from './UnifiedThemeProvider';
 export type { UnifiedThemeProviderProps } from './UnifiedThemeProvider';
 export type { UnifiedTheme, SupportedThemes, SupportedVersions } from './types';