Merge pull request #20142 from backstage/rugvip/theme-icons

user-settings: fix theme icon colors

.changeset/pretty-apes-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Fixed a bug where the theme icons would not be colored according to their active state.

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

@@ -141,8 +141,8 @@ export const UserSettingsThemeToggle = () => {
           onChange={handleSetTheme}
         >
           {themeIds.map(theme => {
-            const themeIcon = themeIds.find(it => it.id === theme.id)?.icon;
             const themeId = theme.id;
+            const themeIcon = theme.icon;
             const themeTitle =
               theme.title ||
               (themeId === 'light' || themeId === 'dark'
@@ -156,7 +156,11 @@ export const UserSettingsThemeToggle = () => {
               >
                 <>
                   {themeTitle}&nbsp;
-                  <ThemeIcon id={themeId} icon={themeIcon} activeId={themeId} />
+                  <ThemeIcon
+                    id={themeId}
+                    icon={themeIcon}
+                    activeId={activeThemeId}
+                  />
                 </>
               </TooltipToggleButton>
             );