Merge pull request #34113 from its-mitesh-kumar/fix/user-settings-theme-toggle-i18n-priority

fix(user-settings): Prioritize i18n translation for built-in theme names

.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.

plugins/user-settings/src/components/General/UserSettingsThemeToggle.test.tsx

@@ -56,4 +56,44 @@ describe('<UserSettingsThemeToggle />', () => {
     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 }) => (
+        <ThemeProvider theme={lightTheme}>
+          <CssBaseline>{children}</CssBaseline>
+        </ThemeProvider>
+      ),
+    };
+
+    const builtInDarkTheme: AppTheme = {
+      id: 'dark',
+      title: 'My Custom Dark',
+      variant: 'dark',
+      Provider: ({ children }) => (
+        <ThemeProvider theme={lightTheme}>
+          <CssBaseline>{children}</CssBaseline>
+        </ThemeProvider>
+      ),
+    };
+
+    const builtInApiRegistry = TestApiRegistry.from([
+      appThemeApiRef,
+      AppThemeSelector.createWithStorage([builtInLightTheme, builtInDarkTheme]),
+    ]);
+
+    await renderInTestApp(
+      <ApiProvider apis={builtInApiRegistry}>
+        <UserSettingsThemeToggle />
+      </ApiProvider>,
+    );
+
+    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();
+  });
 });

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 (
               <TooltipToggleButton
                 key={themeId}