Add icon to theme and use in ThemeToggle

packages/core-api/src/apis/definitions/AppThemeApi.ts

@@ -17,6 +17,7 @@
 import { createApiRef } from '../ApiRef';
 import { BackstageTheme } from '@backstage/theme';
 import { Observable } from '../../types';
+import { SvgIconProps } from '@material-ui/core';
 
 /**
  * Describes a theme provided by the app.
@@ -41,6 +42,11 @@ export type AppTheme = {
    * The specialized MaterialUI theme instance.
    */
   theme: BackstageTheme;
+
+  /**
+   * An Icon for the theme mode setting.
+   */
+  icon?: React.ReactElement<SvgIconProps>;
 };
 
 /**

packages/core-api/src/app/types.ts

@@ -112,11 +112,13 @@ export type AppOptions = {
    *   title: 'Light Theme',
    *   variant: 'light',
    *   theme: lightTheme,
+   *   icon: <LightIcon />,
    * }, {
    *   id: 'dark',
    *   title: 'Dark Theme',
    *   variant: 'dark',
    *   theme: darkTheme,
+   *   icon: <DarkIcon />,
    * }]
    * ```
    */

packages/core/src/api-wrappers/createApp.tsx

@@ -22,7 +22,8 @@ import privateExports, {
   AppConfigLoader,
 } from '@backstage/core-api';
 import { BrowserRouter, MemoryRouter } from 'react-router-dom';
-
+import LightIcon from '@material-ui/icons/WbSunny';
+import DarkIcon from '@material-ui/icons/Brightness2';
 import { ErrorPage } from '../layout/ErrorPage';
 import { Progress } from '../components/Progress';
 import { defaultApis } from './defaultApis';
@@ -110,12 +111,14 @@ export function createApp(options?: AppOptions) {
       title: 'Light Theme',
       variant: 'light',
       theme: lightTheme,
+      icon: <LightIcon />,
     },
     {
       id: 'dark',
       title: 'Dark Theme',
       variant: 'dark',
       theme: darkTheme,
+      icon: <DarkIcon />,
     },
   ];
   const configLoader = options?.configLoader ?? defaultConfigLoader;

plugins/user-settings/src/components/ThemeToggle.tsx

@@ -16,8 +16,6 @@
 
 import React from 'react';
 import { useObservable } from 'react-use';
-import LightIcon from '@material-ui/icons/WbSunny';
-import DarkIcon from '@material-ui/icons/Brightness2';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
 import { appThemeApiRef, useApi } from '@backstage/core';
 import ToggleButton from '@material-ui/lab/ToggleButton';
@@ -37,11 +35,6 @@ export const SidebarThemeToggle = () => {
   );
 
   const themeIds = appThemeApi.getInstalledThemes();
-  // TODO(marcuseide): can these be put on the theme itself?
-  const themeIcons = {
-    dark: <DarkIcon />,
-    light: <LightIcon />,
-  };
 
   const handleSetTheme = (
     _event: React.MouseEvent<HTMLElement>,
@@ -71,7 +64,7 @@ export const SidebarThemeToggle = () => {
                 arrow
                 title={`Select ${theme.variant} theme`}
               >
-                {themeIcons[theme.variant]}
+                {themeIds.find(t => t.id === theme.id)!.icon ?? <AutoIcon />}
               </Tooltip>
             </ToggleButton>
           ))}