Add themeName prop

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

.changeset/slick-books-sleep.md

@@ -3,4 +3,4 @@
 '@backstage/theme': patch
 ---
 
-Added support for the `data-theme-name` attribute to dynamically update based on the active theme. Previously, this attribute was statically set to `backstage` and did not reflect theme changes.
+Added `themeName` props to `UnifiedThemeProvider` to allow setting Backstage UI `data-theme-name`CSS attribute dynamically based on the active theme.

packages/core-app-api/package.json

@@ -48,7 +48,6 @@
   "dependencies": {
     "@backstage/config": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
-    "@backstage/theme": "workspace:^",
     "@backstage/types": "workspace:^",
     "@backstage/version-bridge": "workspace:^",
     "@types/prop-types": "^15.7.3",

packages/core-app-api/src/app/AppThemeProvider.tsx

@@ -16,7 +16,6 @@
 
 import { useMemo, useEffect, useState, PropsWithChildren } from 'react';
 import { useApi, appThemeApiRef, AppTheme } from '@backstage/core-plugin-api';
-import { AppThemeIdContext } from '@backstage/theme';
 import useObservable from 'react-use/esm/useObservable';
 
 // This tries to find the most accurate match, but also falls back to less
@@ -89,9 +88,5 @@ export function AppThemeProvider({ children }: PropsWithChildren<{}>) {
     throw new Error('App has no themes');
   }
 
-  return (
-    <AppThemeIdContext.Provider value={appTheme.id}>
-      <appTheme.Provider children={children} />
-    </AppThemeIdContext.Provider>
-  );
+  return <appTheme.Provider>{children}</appTheme.Provider>;
 }

packages/test-utils/src/testUtils/appWrappers.tsx

@@ -167,7 +167,7 @@ export function createTestAppWrapper(
         title: 'Test App Theme',
         variant: 'light',
         Provider: ({ children }) => (
-          <UnifiedThemeProvider theme={themes.light}>
+          <UnifiedThemeProvider theme={themes.light} themeName="light">
             {children}
           </UnifiedThemeProvider>
         ),

packages/theme/report.api.md

@@ -4,7 +4,6 @@
 
 ```ts
 import type { ComponentsProps } from '@material-ui/core/styles/props';
-import { Context } from 'react';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import type { Palette } from '@material-ui/core/styles/createPalette';
 import type { PaletteOptions } from '@material-ui/core/styles/createPalette';
@@ -19,9 +18,6 @@ import { ThemeOptions as ThemeOptions_2 } from '@material-ui/core/styles';
 import type { ThemeOptions as ThemeOptions_3 } from '@material-ui/core/styles/createTheme';
 import { UnifiedTheme as UnifiedTheme_2 } from '@backstage/theme';
 
-// @public
-export const AppThemeIdContext: Context<string | undefined>;
-
 // @public @deprecated
 export type BackstagePalette = Palette & BackstagePaletteAdditions;
 
@@ -464,5 +460,6 @@ export interface UnifiedThemeProviderProps {
   children: ReactNode;
   // (undocumented)
   theme: UnifiedTheme;
+  themeName?: string;
 }
 ```

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

@@ -21,10 +21,7 @@ import {
 import { useTheme as useV5Theme } from '@mui/material/styles';
 import { makeStyles as makeV5Styles } from '@mui/styles';
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-  UnifiedThemeProvider,
-  AppThemeIdContext,
-} from './UnifiedThemeProvider';
+import { UnifiedThemeProvider } from './UnifiedThemeProvider';
 import { themes } from './themes';
 
 describe('UnifiedThemeProvider', () => {
@@ -91,13 +88,11 @@ describe('UnifiedThemeProvider', () => {
     );
   });
 
-  it('applies theme attributes based on the provided theme id', async () => {
+  it('applies theme attributes based on the provided options', async () => {
     render(
-      <AppThemeIdContext.Provider value="aperture">
-        <UnifiedThemeProvider theme={themes.light}>
-          <span>theme</span>
-        </UnifiedThemeProvider>
-      </AppThemeIdContext.Provider>,
+      <UnifiedThemeProvider theme={themes.light} themeName="aperture">
+        <span>theme</span>
+      </UnifiedThemeProvider>,
     );
 
     await waitFor(() =>

packages/theme/src/unified/UnifiedThemeProvider.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ReactNode, createContext, useContext } from 'react';
+import { ReactNode } from 'react';
 import {
   ThemeProvider,
   StylesProvider,
@@ -29,12 +29,6 @@ import {
 import { UnifiedTheme } from './types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
 
-/**
- * React context for the current application theme ID.
- * @public
- */
-export const AppThemeIdContext = createContext<string | undefined>(undefined);
-
 /**
  * Props for {@link UnifiedThemeProvider}.
  *
@@ -43,6 +37,8 @@ export const AppThemeIdContext = createContext<string | undefined>(undefined);
 export interface UnifiedThemeProviderProps {
   children: ReactNode;
   theme: UnifiedTheme;
+  /** Optional override for the value written to the `data-theme-name` attribute. */
+  themeName?: string;
 }
 
 /**
@@ -72,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;
 
   const themeMode = v4Theme ? v4Theme.palette.type : v5Theme?.palette.mode;
-  const themeId = useContext(AppThemeIdContext) ?? 'backstage';
 
-  useApplyThemeAttributes(themeMode, themeId);
+  useApplyThemeAttributes(themeMode, themeName ?? 'backstage');
 
   let result = children as JSX.Element;
 

packages/theme/src/unified/index.ts

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

yarn.lock

@@ -3493,7 +3493,6 @@ __metadata:
     "@backstage/config": "workspace:^"
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/test-utils": "workspace:^"
-    "@backstage/theme": "workspace:^"
     "@backstage/types": "workspace:^"
     "@backstage/version-bridge": "workspace:^"
     "@testing-library/dom": "npm:^10.0.0"