From b73152793bc96db630ac897b91cce8f69d57aca0 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 22 Jul 2025 12:34:49 +0100 Subject: [PATCH] Add themeName Signed-off-by: Charles de Dreuille --- .changeset/great-snakes-dress.md | 5 +++++ packages/theme/src/unified/UnifiedThemeProvider.tsx | 5 ++++- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 .changeset/great-snakes-dress.md 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) {