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 (