diff --git a/.changeset/purple-papayas-exist.md b/.changeset/purple-papayas-exist.md
new file mode 100644
index 0000000000..4c77558476
--- /dev/null
+++ b/.changeset/purple-papayas-exist.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Fix a bug that prevented changing themes on the user settings page when the theme `id` didn't match exactly the theme `variant`.
diff --git a/plugins/user-settings/package.json b/plugins/user-settings/package.json
index 7fed36532e..ad6e42c398 100644
--- a/plugins/user-settings/package.json
+++ b/plugins/user-settings/package.json
@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "^0.7.0",
+    "@backstage/core-plugin-api": "^0.1.2",
     "@backstage/dev-utils": "^0.1.17",
     "@backstage/test-utils": "^0.1.13",
     "@testing-library/jest-dom": "^5.10.1",
diff --git a/plugins/user-settings/src/components/General/ThemeToggle.test.tsx b/plugins/user-settings/src/components/General/ThemeToggle.test.tsx
index 79d9210826..a4f9ea6af3 100644
--- a/plugins/user-settings/src/components/General/ThemeToggle.test.tsx
+++ b/plugins/user-settings/src/components/General/ThemeToggle.test.tsx
@@ -20,16 +20,17 @@ import {
   appThemeApiRef,
   AppThemeSelector,
 } from '@backstage/core';
+import { AppTheme } from '@backstage/core-plugin-api';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import { lightTheme } from '@backstage/theme';
 import { fireEvent } from '@testing-library/react';
 import React from 'react';
 import { ThemeToggle } from './ThemeToggle';
 
-const mockTheme = {
-  id: 'light',
+const mockTheme: AppTheme = {
+  id: 'light-theme',
   title: 'Mock Theme',
-  variant: 'light' as 'light', // wut?
+  variant: 'light',
   theme: lightTheme,
 };
 
@@ -53,6 +54,6 @@ describe('<ThemeToggle />', () => {
     const themeButton = rendered.getByTitle('Select Mock Theme');
     expect(themeApi?.getActiveThemeId()).toBe(undefined);
     fireEvent.click(themeButton);
-    expect(themeApi?.getActiveThemeId()).toBe('light');
+    expect(themeApi?.getActiveThemeId()).toBe('light-theme');
   });
 });
diff --git a/plugins/user-settings/src/components/General/ThemeToggle.tsx b/plugins/user-settings/src/components/General/ThemeToggle.tsx
index e142b6bf1e..0a3f9ababa 100644
--- a/plugins/user-settings/src/components/General/ThemeToggle.tsx
+++ b/plugins/user-settings/src/components/General/ThemeToggle.tsx
@@ -128,7 +128,7 @@ export const ThemeToggle = () => {
               <TooltipToggleButton
                 key={theme.id}
                 title={`Select ${theme.title}`}
-                value={theme.variant}
+                value={theme.id}
               >
                 <>
                   {theme.variant}&nbsp;