Fix theme toggling bug

Signed-off-by: Tim Hansen <timbonicus@gmail.com>

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

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",

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');
   });
 });

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;