From fa06f6bd610a52c2739f2a21c5bb92d9ff89b66d Mon Sep 17 00:00:00 2001 From: gaelgoth Date: Tue, 21 Oct 2025 09:59:23 +0200 Subject: [PATCH 1/7] Use theme ID context instead default 'backstage' value Signed-off-by: gaelgoth --- .changeset/slick-books-sleep.md | 6 ++++ packages/core-app-api/package.json | 1 + .../core-app-api/src/app/AppThemeProvider.tsx | 7 ++++- .../src/createPublicSignInApp.test.tsx | 4 +-- .../src/unified/UnifiedThemeProvider.test.tsx | 28 +++++++++++++++++-- .../src/unified/UnifiedThemeProvider.tsx | 12 ++++---- packages/theme/src/unified/index.ts | 5 +++- .../src/alpha/appModulePublicSignIn.test.tsx | 4 +-- yarn.lock | 1 + 9 files changed, 55 insertions(+), 13 deletions(-) create mode 100644 .changeset/slick-books-sleep.md diff --git a/.changeset/slick-books-sleep.md b/.changeset/slick-books-sleep.md new file mode 100644 index 0000000000..b1deab67ba --- /dev/null +++ b/.changeset/slick-books-sleep.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-app-api': patch +'@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. diff --git a/packages/core-app-api/package.json b/packages/core-app-api/package.json index 46f1dc04c4..e7f9455392 100644 --- a/packages/core-app-api/package.json +++ b/packages/core-app-api/package.json @@ -48,6 +48,7 @@ "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 719736eabb..93c76eeba0 100644 --- a/packages/core-app-api/src/app/AppThemeProvider.tsx +++ b/packages/core-app-api/src/app/AppThemeProvider.tsx @@ -16,6 +16,7 @@ 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 @@ -88,5 +89,9 @@ export function AppThemeProvider({ children }: PropsWithChildren<{}>) { throw new Error('App has no themes'); } - return ; + return ( + + + + ); } diff --git a/packages/frontend-defaults/src/createPublicSignInApp.test.tsx b/packages/frontend-defaults/src/createPublicSignInApp.test.tsx index e80d058140..037c7e7d8c 100644 --- a/packages/frontend-defaults/src/createPublicSignInApp.test.tsx +++ b/packages/frontend-defaults/src/createPublicSignInApp.test.tsx @@ -95,8 +95,8 @@ describe('createPublicSignInApp', () => { expect(baseElement).toMatchInlineSnapshot(`
{ + 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( + + + theme + + , + ); + + await waitFor(() => + expect(document.body.getAttribute('data-theme-name')).toBe('aperture'), + ); + expect(document.body.getAttribute('data-theme-mode')).toBe('light'); + }); }); diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index d0886cd146..74131ede20 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 } 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(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; diff --git a/packages/theme/src/unified/index.ts b/packages/theme/src/unified/index.ts index 747662e195..6bb5ba46de 100644 --- a/packages/theme/src/unified/index.ts +++ b/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'; diff --git a/plugins/app/src/alpha/appModulePublicSignIn.test.tsx b/plugins/app/src/alpha/appModulePublicSignIn.test.tsx index 787b8949e5..0c27a5f2e1 100644 --- a/plugins/app/src/alpha/appModulePublicSignIn.test.tsx +++ b/plugins/app/src/alpha/appModulePublicSignIn.test.tsx @@ -98,8 +98,8 @@ describe('appModulePublicSignIn', () => { expect(baseElement).toMatchInlineSnapshot(`
Date: Tue, 21 Oct 2025 11:22:30 +0200 Subject: [PATCH 2/7] Update report Signed-off-by: gaelgoth --- packages/core-components/report-alpha.api.md | 2 +- packages/theme/report.api.md | 4 ++++ packages/theme/src/unified/UnifiedThemeProvider.tsx | 4 ++++ plugins/scaffolder/report-alpha.api.md | 4 ++-- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/core-components/report-alpha.api.md b/packages/core-components/report-alpha.api.md index 96ddebcd3a..c8a9457156 100644 --- a/packages/core-components/report-alpha.api.md +++ b/packages/core-components/report-alpha.api.md @@ -15,8 +15,8 @@ export const coreComponentsTranslationRef: TranslationRef< readonly 'table.body.emptyDataSourceMessage': 'No records to display'; readonly 'table.header.actions': 'Actions'; readonly 'table.toolbar.search': 'Filter'; - readonly 'table.pagination.firstTooltip': 'First Page'; readonly 'table.pagination.labelDisplayedRows': '{from}-{to} of {count}'; + readonly 'table.pagination.firstTooltip': 'First Page'; readonly 'table.pagination.labelRowsSelect': 'rows'; readonly 'table.pagination.lastTooltip': 'Last Page'; readonly 'table.pagination.nextTooltip': 'Next Page'; diff --git a/packages/theme/report.api.md b/packages/theme/report.api.md index 18ac96ecec..e083011ae1 100644 --- a/packages/theme/report.api.md +++ b/packages/theme/report.api.md @@ -4,6 +4,7 @@ ```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'; @@ -18,6 +19,9 @@ 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; diff --git a/packages/theme/src/unified/UnifiedThemeProvider.tsx b/packages/theme/src/unified/UnifiedThemeProvider.tsx index 74131ede20..49ac5bb69d 100644 --- a/packages/theme/src/unified/UnifiedThemeProvider.tsx +++ b/packages/theme/src/unified/UnifiedThemeProvider.tsx @@ -29,6 +29,10 @@ 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); /** diff --git a/plugins/scaffolder/report-alpha.api.md b/plugins/scaffolder/report-alpha.api.md index a5dd2a22d1..1a0a19588d 100644 --- a/plugins/scaffolder/report-alpha.api.md +++ b/plugins/scaffolder/report-alpha.api.md @@ -543,8 +543,6 @@ export const scaffolderTranslationRef: TranslationRef< readonly 'renderSchema.tableCell.description': 'Description'; readonly 'templatingExtensions.content.values.title': 'Values'; readonly 'templatingExtensions.content.values.notAvailable': 'There are no global template values defined.'; - readonly 'templatingExtensions.content.emptyState.title': 'No information to display'; - readonly 'templatingExtensions.content.emptyState.description': 'There are no templating extensions available or there was an issue communicating with the backend.'; readonly 'templatingExtensions.content.filters.title': 'Filters'; readonly 'templatingExtensions.content.filters.schema.input': 'Input'; readonly 'templatingExtensions.content.filters.schema.output': 'Output'; @@ -552,6 +550,8 @@ export const scaffolderTranslationRef: TranslationRef< readonly 'templatingExtensions.content.filters.examples': 'Examples'; readonly 'templatingExtensions.content.filters.notAvailable': 'There are no template filters defined.'; readonly 'templatingExtensions.content.filters.metadataAbsent': 'Filter metadata unavailable'; + readonly 'templatingExtensions.content.emptyState.title': 'No information to display'; + readonly 'templatingExtensions.content.emptyState.description': 'There are no templating extensions available or there was an issue communicating with the backend.'; readonly 'templatingExtensions.content.searchFieldPlaceholder': 'Search for an extension'; readonly 'templatingExtensions.content.functions.title': 'Functions'; readonly 'templatingExtensions.content.functions.schema.output': 'Output'; From db14da4f9b39eb95a977d8214a891d170cd0551f Mon Sep 17 00:00:00 2001 From: gaelgoth Date: Wed, 12 Nov 2025 14:58:57 +0100 Subject: [PATCH 3/7] Add themeName prop Signed-off-by: gaelgoth --- .changeset/slick-books-sleep.md | 2 +- packages/core-app-api/package.json | 1 - .../core-app-api/src/app/AppThemeProvider.tsx | 7 +------ packages/test-utils/src/testUtils/appWrappers.tsx | 2 +- packages/theme/report.api.md | 5 +---- .../src/unified/UnifiedThemeProvider.test.tsx | 15 +++++---------- .../theme/src/unified/UnifiedThemeProvider.tsx | 15 +++++---------- packages/theme/src/unified/index.ts | 5 +---- yarn.lock | 1 - 9 files changed, 15 insertions(+), 38 deletions(-) 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" From a32c216b0a91095abaef4af07e3c833108437dd7 Mon Sep 17 00:00:00 2001 From: gaelgoth Date: Fri, 14 Nov 2025 10:34:58 +0100 Subject: [PATCH 4/7] Update Apps and reports Signed-off-by: gaelgoth --- packages/app-defaults/src/defaults/themes.tsx | 8 ++++++-- packages/core-app-api/src/app/AppThemeProvider.tsx | 2 +- packages/core-components/report-alpha.api.md | 2 +- plugins/app/src/extensions/AppThemeApi.tsx | 8 ++++++-- plugins/scaffolder/report-alpha.api.md | 4 ++-- 5 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/app-defaults/src/defaults/themes.tsx b/packages/app-defaults/src/defaults/themes.tsx index 6929b53727..36ed582ceb 100644 --- a/packages/app-defaults/src/defaults/themes.tsx +++ b/packages/app-defaults/src/defaults/themes.tsx @@ -29,7 +29,9 @@ export const themes: AppTheme[] = [ variant: 'light', icon: , Provider: ({ children }) => ( - + + {children} + ), }, { @@ -38,7 +40,9 @@ export const themes: AppTheme[] = [ variant: 'dark', icon: , Provider: ({ children }) => ( - + + {children} + ), }, ]; diff --git a/packages/core-app-api/src/app/AppThemeProvider.tsx b/packages/core-app-api/src/app/AppThemeProvider.tsx index eb6903133d..719736eabb 100644 --- a/packages/core-app-api/src/app/AppThemeProvider.tsx +++ b/packages/core-app-api/src/app/AppThemeProvider.tsx @@ -88,5 +88,5 @@ export function AppThemeProvider({ children }: PropsWithChildren<{}>) { throw new Error('App has no themes'); } - return {children}; + return ; } diff --git a/packages/core-components/report-alpha.api.md b/packages/core-components/report-alpha.api.md index c8a9457156..96ddebcd3a 100644 --- a/packages/core-components/report-alpha.api.md +++ b/packages/core-components/report-alpha.api.md @@ -15,8 +15,8 @@ export const coreComponentsTranslationRef: TranslationRef< readonly 'table.body.emptyDataSourceMessage': 'No records to display'; readonly 'table.header.actions': 'Actions'; readonly 'table.toolbar.search': 'Filter'; - readonly 'table.pagination.labelDisplayedRows': '{from}-{to} of {count}'; readonly 'table.pagination.firstTooltip': 'First Page'; + readonly 'table.pagination.labelDisplayedRows': '{from}-{to} of {count}'; readonly 'table.pagination.labelRowsSelect': 'rows'; readonly 'table.pagination.lastTooltip': 'Last Page'; readonly 'table.pagination.nextTooltip': 'Next Page'; diff --git a/plugins/app/src/extensions/AppThemeApi.tsx b/plugins/app/src/extensions/AppThemeApi.tsx index e3c516ca69..38a9bffd28 100644 --- a/plugins/app/src/extensions/AppThemeApi.tsx +++ b/plugins/app/src/extensions/AppThemeApi.tsx @@ -62,7 +62,9 @@ export const LightTheme = ThemeBlueprint.make({ variant: 'light', icon: , Provider: ({ children }) => ( - + + {children} + ), }, }, @@ -77,7 +79,9 @@ export const DarkTheme = ThemeBlueprint.make({ variant: 'dark', icon: , Provider: ({ children }) => ( - + + {children} + ), }, }, diff --git a/plugins/scaffolder/report-alpha.api.md b/plugins/scaffolder/report-alpha.api.md index 1a0a19588d..a5dd2a22d1 100644 --- a/plugins/scaffolder/report-alpha.api.md +++ b/plugins/scaffolder/report-alpha.api.md @@ -543,6 +543,8 @@ export const scaffolderTranslationRef: TranslationRef< readonly 'renderSchema.tableCell.description': 'Description'; readonly 'templatingExtensions.content.values.title': 'Values'; readonly 'templatingExtensions.content.values.notAvailable': 'There are no global template values defined.'; + readonly 'templatingExtensions.content.emptyState.title': 'No information to display'; + readonly 'templatingExtensions.content.emptyState.description': 'There are no templating extensions available or there was an issue communicating with the backend.'; readonly 'templatingExtensions.content.filters.title': 'Filters'; readonly 'templatingExtensions.content.filters.schema.input': 'Input'; readonly 'templatingExtensions.content.filters.schema.output': 'Output'; @@ -550,8 +552,6 @@ export const scaffolderTranslationRef: TranslationRef< readonly 'templatingExtensions.content.filters.examples': 'Examples'; readonly 'templatingExtensions.content.filters.notAvailable': 'There are no template filters defined.'; readonly 'templatingExtensions.content.filters.metadataAbsent': 'Filter metadata unavailable'; - readonly 'templatingExtensions.content.emptyState.title': 'No information to display'; - readonly 'templatingExtensions.content.emptyState.description': 'There are no templating extensions available or there was an issue communicating with the backend.'; readonly 'templatingExtensions.content.searchFieldPlaceholder': 'Search for an extension'; readonly 'templatingExtensions.content.functions.title': 'Functions'; readonly 'templatingExtensions.content.functions.schema.output': 'Output'; From 5dedb14dd5909c4f27badd0b5855a7b2d850548a Mon Sep 17 00:00:00 2001 From: gaelgoth Date: Fri, 14 Nov 2025 13:49:23 +0100 Subject: [PATCH 5/7] Revert changes to use the default theme behavior Signed-off-by: gaelgoth --- packages/app-defaults/src/defaults/themes.tsx | 8 ++------ .../frontend-defaults/src/createPublicSignInApp.test.tsx | 4 ++-- packages/test-utils/src/testUtils/appWrappers.tsx | 2 +- plugins/app/src/alpha/appModulePublicSignIn.test.tsx | 4 ++-- plugins/app/src/extensions/AppThemeApi.tsx | 8 ++------ 5 files changed, 9 insertions(+), 17 deletions(-) diff --git a/packages/app-defaults/src/defaults/themes.tsx b/packages/app-defaults/src/defaults/themes.tsx index 36ed582ceb..6929b53727 100644 --- a/packages/app-defaults/src/defaults/themes.tsx +++ b/packages/app-defaults/src/defaults/themes.tsx @@ -29,9 +29,7 @@ export const themes: AppTheme[] = [ variant: 'light', icon: , Provider: ({ children }) => ( - - {children} - + ), }, { @@ -40,9 +38,7 @@ export const themes: AppTheme[] = [ variant: 'dark', icon: , Provider: ({ children }) => ( - - {children} - + ), }, ]; diff --git a/packages/frontend-defaults/src/createPublicSignInApp.test.tsx b/packages/frontend-defaults/src/createPublicSignInApp.test.tsx index 037c7e7d8c..e80d058140 100644 --- a/packages/frontend-defaults/src/createPublicSignInApp.test.tsx +++ b/packages/frontend-defaults/src/createPublicSignInApp.test.tsx @@ -95,8 +95,8 @@ describe('createPublicSignInApp', () => { expect(baseElement).toMatchInlineSnapshot(`
( - + {children} ), diff --git a/plugins/app/src/alpha/appModulePublicSignIn.test.tsx b/plugins/app/src/alpha/appModulePublicSignIn.test.tsx index 0c27a5f2e1..787b8949e5 100644 --- a/plugins/app/src/alpha/appModulePublicSignIn.test.tsx +++ b/plugins/app/src/alpha/appModulePublicSignIn.test.tsx @@ -98,8 +98,8 @@ describe('appModulePublicSignIn', () => { expect(baseElement).toMatchInlineSnapshot(`
, Provider: ({ children }) => ( - - {children} - + ), }, }, @@ -79,9 +77,7 @@ export const DarkTheme = ThemeBlueprint.make({ variant: 'dark', icon: , Provider: ({ children }) => ( - - {children} - + ), }, }, From e482c385c184010b6df9ddd7a3d9c1701dec8c51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20G=2E?= <55390114+gaelgoth@users.noreply.github.com> Date: Mon, 17 Nov 2025 15:52:31 +0100 Subject: [PATCH 6/7] Remove package update from changeset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Patrik Oldsberg Signed-off-by: Gaël G. <55390114+gaelgoth@users.noreply.github.com> --- .changeset/slick-books-sleep.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/slick-books-sleep.md b/.changeset/slick-books-sleep.md index 4f84c4e682..d67e16c6be 100644 --- a/.changeset/slick-books-sleep.md +++ b/.changeset/slick-books-sleep.md @@ -1,5 +1,4 @@ --- -'@backstage/core-app-api': patch '@backstage/theme': patch --- From 93c7d245475f733d4e7e378487cf19afd9a3b4fa Mon Sep 17 00:00:00 2001 From: gaelgoth Date: Mon, 17 Nov 2025 15:56:07 +0100 Subject: [PATCH 7/7] Improve phrasing Signed-off-by: gaelgoth --- .changeset/slick-books-sleep.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/slick-books-sleep.md b/.changeset/slick-books-sleep.md index d67e16c6be..7aa3be5b03 100644 --- a/.changeset/slick-books-sleep.md +++ b/.changeset/slick-books-sleep.md @@ -2,4 +2,4 @@ '@backstage/theme': patch --- -Added `themeName` props to `UnifiedThemeProvider` to allow setting Backstage UI `data-theme-name`CSS attribute dynamically based on the active theme. +Added a `themeName` prop to `UnifiedThemeProvider`, enabling Backstage UI `data-theme-name` CSS attribute to be set based on active theme.