feat: consume theme provided by Page theme provider

plugins/lighthouse/src/components/AuditList/index.tsx

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { useState, useMemo, FC, ReactNode } from 'react';
 import { useLocalStorage, useAsync } from 'react-use';
 import { useNavigate } from 'react-router-dom';
-import { Grid, Button } from '@material-ui/core';
+import { Grid, Button, useTheme } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import Pagination from '@material-ui/lab/Pagination';
 import {
@@ -41,6 +41,7 @@ import { createAuditRouteRef } from '../../plugin';
 export const LIMIT = 10;
 
 const AuditList: FC<{}> = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const [dismissedStored] = useLocalStorage(LIGHTHOUSE_INTRO_LOCAL_STORAGE);
   const [dismissed, setDismissed] = useState(dismissedStored);
 
@@ -94,7 +95,11 @@ const AuditList: FC<{}> = () => {
   }
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Header
         title="Lighthouse"
         subtitle="Website audits powered by Lighthouse"

plugins/lighthouse/src/components/AuditView/index.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { useState, useEffect, ReactNode, FC } from 'react';
 import {
   Link,
@@ -31,6 +31,7 @@ import {
   Button,
   ListItemIcon,
   ListItemText,
+  useTheme,
 } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import {
@@ -125,6 +126,7 @@ const AuditView: FC<{ audit?: Audit }> = ({ audit }: { audit?: Audit }) => {
 };
 
 const ConnectedAuditView: FC<{}> = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const lighthouseApi = useApi(lighthouseApiRef);
   const params = useParams() as { id: string };
   const classes = useStyles();
@@ -173,7 +175,11 @@ const ConnectedAuditView: FC<{}> = () => {
   }
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Header
         title="Lighthouse"
         subtitle="Website audits powered by Lighthouse"

plugins/lighthouse/src/components/CreateAudit/index.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { useState, useCallback, FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
@@ -24,6 +24,7 @@ import {
   ListItem,
   MenuItem,
   TextField,
+  useTheme,
 } from '@material-ui/core';
 import {
   errorApiRef,
@@ -54,6 +55,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const CreateAudit: FC<{}> = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const errorApi = useApi(errorApiRef);
   const lighthouseApi = useApi(lighthouseApiRef);
   const classes = useStyles();
@@ -94,7 +96,11 @@ const CreateAudit: FC<{}> = () => {
   ]);
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Header
         title="Lighthouse"
         subtitle="Website audits powered by Lighthouse"