packages,plugins: use lightTheme/darkTheme exports from theme package

packages/app/src/App.tsx

@@ -20,7 +20,7 @@ import {
   Theme,
   ThemeProvider,
 } from '@material-ui/core';
-import { BackstageThemeLight, BackstageThemeDark } from '@backstage/theme';
+import { lightTheme, darkTheme } from '@backstage/theme';
 import { createApp } from '@backstage/core';
 import React, { FC } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -53,30 +53,28 @@ app.registerApis(apis);
 app.registerPlugin(...Object.values(plugins));
 const AppComponent = app.build();
 
-type T = typeof BackstageThemeLight | typeof BackstageThemeDark;
-
 const App: FC<{}> = () => {
   useStyles();
   const [theme, toggleTheme] = useThemeType(
     localStorage.getItem('theme') || 'auto',
   );
 
-  let backstageTheme: T = BackstageThemeLight;
+  let backstageTheme = lightTheme;
   switch (theme) {
     case 'light':
-      backstageTheme = BackstageThemeLight;
+      backstageTheme = lightTheme;
       break;
     case 'dark':
-      backstageTheme = BackstageThemeDark;
+      backstageTheme = darkTheme;
       break;
     default:
       if (!window.matchMedia) {
-        backstageTheme = BackstageThemeLight;
+        backstageTheme = lightTheme;
         break;
       }
       backstageTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? BackstageThemeDark
-        : BackstageThemeLight;
+        ? darkTheme
+        : lightTheme;
       break;
   }
 

packages/cli/templates/default-app/packages/app/src/App.tsx

@@ -1,6 +1,6 @@
 import { CssBaseline, makeStyles, ThemeProvider } from '@material-ui/core';
 import { createApp } from '@backstage/core';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
 import React, { FC } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import * as plugins from './plugins';
@@ -31,7 +31,7 @@ const App: FC<{}> = () => {
   useStyles();
   return (
     <CssBaseline>
-      <ThemeProvider theme={BackstageTheme}>
+      <ThemeProvider theme={lightTheme}>
         <Router>
           <AppComponent />
         </Router>

packages/cli/templates/default-app/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import WelcomePage from './WelcomePage';
 import { ThemeProvider } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
 
 describe('WelcomePage', () => {
   it('should render', () => {
     const rendered = render(
-      <ThemeProvider theme={BackstageTheme}>
+      <ThemeProvider theme={lightTheme}>
         <WelcomePage />
       </ThemeProvider>,
     );

packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs

@@ -19,13 +19,13 @@ import { render } from '@testing-library/react';
 import mockFetch from 'jest-fetch-mock';
 import ExampleComponent from './ExampleComponent';
 import { ThemeProvider } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
 
 describe('ExampleComponent', () => {
   it('should render', () => {
     mockFetch.mockResponse(() => new Promise(() => {}));
     const rendered = render(
-      <ThemeProvider theme={BackstageTheme}>
+      <ThemeProvider theme={lightTheme}>
         <ExampleComponent />
       </ThemeProvider>,
     );

packages/storybook/.storybook/config.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { addDecorator } from '@storybook/react';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
 import { CssBaseline, ThemeProvider } from '@material-ui/core';
 
 addDecorator(story => (
-  <ThemeProvider theme={BackstageTheme}>
+  <ThemeProvider theme={lightTheme}>
     <CssBaseline>{story()}</CssBaseline>
   </ThemeProvider>
 ));

packages/test-utils/src/testUtils/appWrappers.tsx

@@ -18,7 +18,7 @@ import React, { ComponentType, ReactNode, FunctionComponent } from 'react';
 import { ThemeProvider } from '@material-ui/core';
 import { MemoryRouter } from 'react-router';
 import { Route } from 'react-router-dom';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
 
 export function wrapInTestApp(
   Component: ComponentType | ReactNode,
@@ -42,12 +42,10 @@ export function wrapInThemedTestApp(
   component: ReactNode,
   initialRouterEntries: string[] = ['/'],
 ) {
-  const themed = (
-    <ThemeProvider theme={BackstageTheme}>{component}</ThemeProvider>
-  );
+  const themed = <ThemeProvider theme={lightTheme}>{component}</ThemeProvider>;
   return wrapInTestApp(themed, initialRouterEntries);
 }
 
-export const wrapInTheme = (component: ReactNode, theme = BackstageTheme) => (
+export const wrapInTheme = (component: ReactNode, theme = lightTheme) => (
   <ThemeProvider theme={theme}>{component}</ThemeProvider>
 );

packages/theme/src/index.ts

@@ -15,12 +15,8 @@
  */
 
 // TODO: backwards compatibility, remove
-import { lightTheme, darkTheme } from './themes';
-export {
-  lightTheme as BackstageTheme,
-  lightTheme as BackstageThemeLight,
-  darkTheme as BackstageThemeDark,
-};
+import { lightTheme } from './themes';
+export { lightTheme as BackstageTheme };
 
 export * from './themes';
 export * from './baseTheme';

plugins/home-page/src/components/HomePage/HomePage.test.tsx

@@ -18,12 +18,12 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import HomePage from './HomePage';
 import { ThemeProvider } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
 
 describe('HomePage', () => {
   it('should render', () => {
     const rendered = render(
-      <ThemeProvider theme={BackstageTheme}>
+      <ThemeProvider theme={lightTheme}>
         <HomePage />
       </ThemeProvider>,
     );

plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import WelcomePage from './WelcomePage';
 import { ThemeProvider } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
+import { lightTheme } from '@backstage/theme';
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
 
 describe('WelcomePage', () => {
@@ -28,7 +28,7 @@ describe('WelcomePage', () => {
       <ApiProvider
         apis={ApiRegistry.from([[errorApiRef, { post: jest.fn() }]])}
       >
-        <ThemeProvider theme={BackstageTheme}>
+        <ThemeProvider theme={lightTheme}>
           <WelcomePage />
         </ThemeProvider>
       </ApiProvider>,