From d1b637d0054cf11a2cdf155553a945b41ba62719 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Mon, 25 Sep 2023 11:25:46 +0200
Subject: [PATCH] user-settings: fix theme icon colors

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/pretty-apes-sneeze.md                          | 5 +++++
 .../src/components/General/UserSettingsThemeToggle.tsx    | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/pretty-apes-sneeze.md

diff --git a/.changeset/pretty-apes-sneeze.md b/.changeset/pretty-apes-sneeze.md
new file mode 100644
index 0000000000..a1008dc951
--- /dev/null
+++ b/.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.
diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
index 7279fcb96a..ca57de3a78 100644
--- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
+++ b/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>
             );