diff --git a/.changeset/easy-goats-bow.md b/.changeset/easy-goats-bow.md new file mode 100644 index 0000000000..878555832a --- /dev/null +++ b/.changeset/easy-goats-bow.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-user-settings': patch +--- + +Prioritize i18n translation over `theme.title` for built-in light/dark theme names in `UserSettingsThemeToggle`, so that translation overrides are no longer silently ignored. diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx index 9ea632a5cb..af5613f026 100644 --- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx @@ -56,4 +56,44 @@ describe('', () => { fireEvent.click(themeButton); expect(themeApi?.getActiveThemeId()).toBe('light-theme'); }); + + it('uses translated name instead of theme.title for built-in light/dark themes', async () => { + const builtInLightTheme: AppTheme = { + id: 'light', + title: 'My Custom Light', + variant: 'light', + Provider: ({ children }) => ( + + {children} + + ), + }; + + const builtInDarkTheme: AppTheme = { + id: 'dark', + title: 'My Custom Dark', + variant: 'dark', + Provider: ({ children }) => ( + + {children} + + ), + }; + + const builtInApiRegistry = TestApiRegistry.from([ + appThemeApiRef, + AppThemeSelector.createWithStorage([builtInLightTheme, builtInDarkTheme]), + ]); + + await renderInTestApp( + + + , + ); + + expect(screen.getByText('Light')).toBeInTheDocument(); + expect(screen.getByText('Dark')).toBeInTheDocument(); + expect(screen.queryByText('My Custom Light')).not.toBeInTheDocument(); + expect(screen.queryByText('My Custom Dark')).not.toBeInTheDocument(); + }); }); diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx index b7ac5340e4..edd478af5b 100644 --- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx +++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx @@ -142,10 +142,10 @@ export const UserSettingsThemeToggle = () => { const themeId = theme.id; const themeIcon = theme.icon; const themeTitle = - theme.title || - (themeId === 'light' || themeId === 'dark' + themeId === 'light' || themeId === 'dark' ? t(`themeToggle.names.${themeId}`) - : themeId); + : theme.title || themeId; + return (