diff --git a/.changeset/slick-books-sleep.md b/.changeset/slick-books-sleep.md
index b1deab67ba..4f84c4e682 100644
--- a/.changeset/slick-books-sleep.md
+++ b/.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.
diff --git a/packages/core-app-api/package.json b/packages/core-app-api/package.json
index e7f9455392..46f1dc04c4 100644
--- a/packages/core-app-api/package.json
+++ b/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",
diff --git a/packages/core-app-api/src/app/AppThemeProvider.tsx b/packages/core-app-api/src/app/AppThemeProvider.tsx
index 93c76eeba0..eb6903133d 100644
--- a/packages/core-app-api/src/app/AppThemeProvider.tsx
+++ b/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 (
-
-
-
- );
+ return {children};
}
diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx
index e50e87e67f..f628075fb6 100644
--- a/packages/test-utils/src/testUtils/appWrappers.tsx
+++ b/packages/test-utils/src/testUtils/appWrappers.tsx
@@ -167,7 +167,7 @@ export function createTestAppWrapper(
title: 'Test App Theme',
variant: 'light',
Provider: ({ children }) => (
-
+
{children}
),
diff --git a/packages/theme/report.api.md b/packages/theme/report.api.md
index e083011ae1..f4e31db8e9 100644
--- a/packages/theme/report.api.md
+++ b/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;
-
// @public @deprecated
export type BackstagePalette = Palette & BackstagePaletteAdditions;
@@ -464,5 +460,6 @@ export interface UnifiedThemeProviderProps {
children: ReactNode;
// (undocumented)
theme: UnifiedTheme;
+ themeName?: string;
}
```
diff --git a/packages/theme/src/unified/UnifiedThemeProvider.test.tsx b/packages/theme/src/unified/UnifiedThemeProvider.test.tsx
index 83482eb3f6..52769b65a3 100644
--- a/packages/theme/src/unified/UnifiedThemeProvider.test.tsx
+++ b/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(
-
-
- theme
-
- ,
+
+ theme
+ ,
);
await waitFor(() =>
diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx
index 49ac5bb69d..69d843ed3e 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, 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(undefined);
-
/**
* Props for {@link UnifiedThemeProvider}.
*
@@ -43,6 +37,8 @@ export const AppThemeIdContext = createContext(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;
diff --git a/packages/theme/src/unified/index.ts b/packages/theme/src/unified/index.ts
index 6bb5ba46de..747662e195 100644
--- a/packages/theme/src/unified/index.ts
+++ b/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';
diff --git a/yarn.lock b/yarn.lock
index b4da68e144..04970afcde 100644
--- a/yarn.lock
+++ b/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"