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 5ae7d510fe..a80e36cf35 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -71,14 +71,17 @@ 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]); + }, [themeMode, themeName]); let cssBaseline: JSX.Element | undefined = undefined; if (!noCssBaseline) {