feat: consume theme provided by Page theme provider

plugins/tech-radar/src/components/RadarPage.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, useTheme } from '@material-ui/core';
 import {
   Content,
   ContentHeader,
@@ -39,29 +39,35 @@ export const RadarPage = ({
   subtitle,
   pageTitle,
   ...props
-}: TechRadarPageProps): JSX.Element => (
-  <Page pageTheme={customPageTheme.pageTheme.tool}>
-    <Header title={title} subtitle={subtitle}>
-      <HeaderLabel label="Owner" value="Spotify" />
-      <HeaderLabel label="Lifecycle" value="Beta" />
-    </Header>
-    <Content>
-      <ContentHeader title={pageTitle}>
-        <SupportButton>
-          This is used for visualizing the official guidelines of different
-          areas of software development such as languages, frameworks,
-          infrastructure and processes.
-        </SupportButton>
-      </ContentHeader>
-      <Grid container spacing={3} direction="row">
-        <Grid item xs={12} sm={6} md={4}>
-          <RadarComponent {...props} />
+}: TechRadarPageProps): JSX.Element => {
+  const backstageTheme = useTheme<BackstageTheme>();
+  return (
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
+      <Header title={title} subtitle={subtitle}>
+        <HeaderLabel label="Owner" value="Spotify" />
+        <HeaderLabel label="Lifecycle" value="Beta" />
+      </Header>
+      <Content>
+        <ContentHeader title={pageTitle}>
+          <SupportButton>
+            This is used for visualizing the official guidelines of different
+            areas of software development such as languages, frameworks,
+            infrastructure and processes.
+          </SupportButton>
+        </ContentHeader>
+        <Grid container spacing={3} direction="row">
+          <Grid item xs={12} sm={6} md={4}>
+            <RadarComponent {...props} />
+          </Grid>
         </Grid>
-      </Grid>
-    </Content>
-  </Page>
-);
-
+      </Content>
+    </Page>
+  );
+};
 RadarPage.defaultProps = {
   title: 'Tech Radar',
   subtitle: 'Pick the recommended technologies for your projects',