From a1ec4786391c10e635726933d2ce8c5ed9122614 Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Fri, 18 Sep 2020 14:54:59 +0200
Subject: [PATCH] Add icon to theme and use in ThemeToggle

---
 packages/core-api/src/apis/definitions/AppThemeApi.ts | 6 ++++++
 packages/core-api/src/app/types.ts                    | 2 ++
 packages/core/src/api-wrappers/createApp.tsx          | 5 ++++-
 plugins/user-settings/src/components/ThemeToggle.tsx  | 9 +--------
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/core-api/src/apis/definitions/AppThemeApi.ts b/packages/core-api/src/apis/definitions/AppThemeApi.ts
index de70adabd9..3f580450f0 100644
--- a/packages/core-api/src/apis/definitions/AppThemeApi.ts
+++ b/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>;
 };
 
 /**
diff --git a/packages/core-api/src/app/types.ts b/packages/core-api/src/app/types.ts
index 882ecd3d8b..8a1eb92e8e 100644
--- a/packages/core-api/src/app/types.ts
+++ b/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 />,
    * }]
    * ```
    */
diff --git a/packages/core/src/api-wrappers/createApp.tsx b/packages/core/src/api-wrappers/createApp.tsx
index 7fe77423e2..c7d0f5ce01 100644
--- a/packages/core/src/api-wrappers/createApp.tsx
+++ b/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;
diff --git a/plugins/user-settings/src/components/ThemeToggle.tsx b/plugins/user-settings/src/components/ThemeToggle.tsx
index 400a918d32..88eee3c6bf 100644
--- a/plugins/user-settings/src/components/ThemeToggle.tsx
+++ b/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>
           ))}