feat: consume theme provided by Page theme provider

plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { FC, useState } from 'react';
 import {
   Content,
@@ -29,12 +29,13 @@ import {
 } from '@backstage/core';
 
 import ClusterTable from '../ClusterTable/ClusterTable';
-import { Button } from '@material-ui/core';
+import { Button, useTheme } from '@material-ui/core';
 import { useAsync } from 'react-use';
 import { gitOpsApiRef } from '../../api';
 import { Alert } from '@material-ui/lab';
 
 const ClusterList: FC<{}> = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const api = useApi(gitOpsApiRef);
   const githubAuth = useApi(githubAuthApiRef);
   const [githubUsername, setGithubUsername] = useState(String);
@@ -91,7 +92,11 @@ const ClusterList: FC<{}> = () => {
   }
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'home',
+      })}
+    >
       <Header title="GitOps-managed Clusters">
         <HeaderLabel label="Welcome" value={githubUsername} />
       </Header>

plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.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, { FC, useEffect, useState } from 'react';
 import {
   Content,
@@ -26,12 +26,13 @@ import {
   githubAuthApiRef,
 } from '@backstage/core';
 
-import { Link } from '@material-ui/core';
+import { Link, useTheme } from '@material-ui/core';
 import { useParams } from 'react-router-dom';
 import { gitOpsApiRef, Status } from '../../api';
 import { transformRunStatus } from '../ProfileCatalog';
 
 const ClusterPage: FC<{}> = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const params = useParams() as { owner: string; repo: string };
 
   const [pollingLog, setPollingLog] = useState(true);
@@ -84,7 +85,11 @@ const ClusterPage: FC<{}> = () => {
   }, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]);
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'home',
+      })}
+    >
       <Header title={`Cluster ${params.owner}/${params.repo}`}>
         <HeaderLabel label="Welcome" value={githubUsername} />
       </Header>

plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { FC, useEffect, useState } from 'react';
 import {
   Header,
@@ -37,7 +37,7 @@ import {
   useApi,
   githubAuthApiRef,
 } from '@backstage/core';
-import { TextField, List, ListItem, Link } from '@material-ui/core';
+import { TextField, List, ListItem, Link, useTheme } from '@material-ui/core';
 
 import ClusterTemplateCardList from '../ClusterTemplateCardList';
 import ProfileCardList from '../ProfileCardList';
@@ -81,6 +81,8 @@ export const transformRunStatus = (x: Status[]) => {
 };
 
 const ProfileCatalog: FC<{}> = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
+
   // TODO: get data from REST API
   const [clusterTemplates] = React.useState([
     {
@@ -259,7 +261,11 @@ const ProfileCatalog: FC<{}> = () => {
   ];
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Header
         title="Create GitOps-managed Cluster"
         subtitle="Kubernetes cluster with ready-to-use profiles"