diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx
index cc0276224a..a99e9e235f 100644
--- a/packages/core/src/layout/Header/Header.stories.tsx
+++ b/packages/core/src/layout/Header/Header.stories.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 { pageTheme } from '@backstage/theme';
 import React from 'react';
 import { Header } from '.';
 import { HeaderLabel } from '../HeaderLabel';
@@ -33,7 +33,7 @@ const labels = (
 );
 
 export const Home = () => (
-  <Page pageTheme={customPageTheme.pageTheme.home}>
+  <Page theme={pageTheme.home}>
     <Header title="Start/Home Page" type="home">
       {labels}
     </Header>
@@ -47,7 +47,7 @@ export const HomeWithSubtitle = () => (
 );
 
 export const Tool = () => (
-  <Page pageTheme={customPageTheme.pageTheme.tool}>
+  <Page theme={pageTheme.tool}>
     <Header title="Stand-alone tool" type="tool">
       {labels}
     </Header>
@@ -55,7 +55,7 @@ export const Tool = () => (
 );
 
 export const Service = () => (
-  <Page pageTheme={customPageTheme.pageTheme.service}>
+  <Page theme={pageTheme.service}>
     <Header title="Service component page" type="service">
       {labels}
     </Header>
@@ -63,7 +63,7 @@ export const Service = () => (
 );
 
 export const Website = () => (
-  <Page pageTheme={customPageTheme.pageTheme.website}>
+  <Page theme={pageTheme.website}>
     <Header title="Website component page" type="website">
       {labels}
     </Header>
@@ -71,7 +71,7 @@ export const Website = () => (
 );
 
 export const Library = () => (
-  <Page pageTheme={customPageTheme.pageTheme.library}>
+  <Page theme={pageTheme.library}>
     <Header title="Library component page" type="library">
       {labels}
     </Header>
@@ -79,7 +79,7 @@ export const Library = () => (
 );
 
 export const App = () => (
-  <Page pageTheme={customPageTheme.pageTheme.app}>
+  <Page theme={pageTheme.app}>
     <Header title="App component page" type="app">
       {labels}
     </Header>
@@ -87,7 +87,7 @@ export const App = () => (
 );
 
 export const Documentation = () => (
-  <Page pageTheme={customPageTheme.pageTheme.documentation}>
+  <Page theme={pageTheme.documentation}>
     <Header title="Documentation component page" type="documentation">
       {labels}
     </Header>
@@ -95,7 +95,7 @@ export const Documentation = () => (
 );
 
 export const Other = () => (
-  <Page pageTheme={customPageTheme.pageTheme.other}>
+  <Page theme={pageTheme.other}>
     <Header title="Other/generic component page" type="other">
       {labels}
     </Header>
diff --git a/packages/core/src/layout/Header/Header.test.tsx b/packages/core/src/layout/Header/Header.test.tsx
index e5dc7fec4d..5d28c6633f 100644
--- a/packages/core/src/layout/Header/Header.test.tsx
+++ b/packages/core/src/layout/Header/Header.test.tsx
@@ -26,18 +26,18 @@ jest.mock('react-helmet', () => {
 });
 
 describe('<Header/>', () => {
-  it('should render with title', async () => {
+  it('should render with title', () => {
     const rendered = render(wrapInTestApp(<Header title="Title" />));
     rendered.getByText('Title');
   });
 
-  it('should set document title', async () => {
+  it('should set document title', () => {
     const rendered = render(wrapInTestApp(<Header title="Title1" />));
     rendered.getByText('Title1');
     rendered.getByText('defaultTitle: Title1 | Backstage');
   });
 
-  it('should override document title', async () => {
+  it('should override document title', () => {
     const rendered = render(
       wrapInTestApp(<Header title="Title1" pageTitleOverride="Title2" />),
     );
@@ -45,14 +45,14 @@ describe('<Header/>', () => {
     rendered.getByText('defaultTitle: Title2 | Backstage');
   });
 
-  it('should have subtitle', async () => {
+  it('should have subtitle', () => {
     const rendered = render(
       wrapInTestApp(<Header title="Title" subtitle="Subtitle" />),
     );
     rendered.getByText('Subtitle');
   });
 
-  it('should have type rendered', async () => {
+  it('should have type rendered', () => {
     const rendered = render(
       wrapInTestApp(<Header title="Title" type="tool" />),
     );
diff --git a/packages/core/src/layout/Header/Header.tsx b/packages/core/src/layout/Header/Header.tsx
index 41840b6ff0..6fadd0c834 100644
--- a/packages/core/src/layout/Header/Header.tsx
+++ b/packages/core/src/layout/Header/Header.tsx
@@ -17,11 +17,7 @@
 import React, { ReactNode, CSSProperties, FC } from 'react';
 import { Helmet } from 'react-helmet';
 import { Typography, Tooltip, makeStyles, useTheme } from '@material-ui/core';
-import {
-  BackstageTheme,
-  BackstagePageThemeConsumer,
-  customPageTheme,
-} from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 
 const useStyles = makeStyles<BackstageTheme, { backgroundImage: string }>(
   theme => ({
@@ -165,11 +161,9 @@ export const Header: FC<Props> = ({
   type,
   typeLink,
 }) => {
-  const theme = useTheme<BackstagePageThemeConsumer>();
+  const backstageTheme = useTheme<BackstageTheme>();
   const classes = useStyles({
-    backgroundImage:
-      theme.pageTheme?.backgroundImage ??
-      customPageTheme.pageTheme.home.backgroundImage,
+    backgroundImage: backstageTheme.page.backgroundImage,
   });
   const documentTitle = pageTitleOverride || title;
   const pageTitle = title || pageTitleOverride;
diff --git a/packages/core/src/layout/SignInPage/SignInPage.tsx b/packages/core/src/layout/SignInPage/SignInPage.tsx
index 8a1ff68250..b2b049d161 100644
--- a/packages/core/src/layout/SignInPage/SignInPage.tsx
+++ b/packages/core/src/layout/SignInPage/SignInPage.tsx
@@ -19,7 +19,8 @@ import { Page } from '../Page';
 import { Header } from '../Header';
 import { Content } from '../Content/Content';
 import { ContentHeader } from '../ContentHeader/ContentHeader';
-import { Grid } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
+import { Grid, useTheme } from '@material-ui/core';
 import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api';
 import { useSignInProviders, getSignInProviders } from './providers';
 import { IdentityProviders } from './types';
@@ -38,6 +39,7 @@ export const SignInPage: FC<Props> = ({
   title,
   align = 'left',
 }) => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const configApi = useApi(configApiRef);
   const classes = useStyles();
 
@@ -52,7 +54,7 @@ export const SignInPage: FC<Props> = ({
   }
 
   return (
-    <Page>
+    <Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
       <Header title={configApi.getString('app.title')} />
       <Content>
         {title && <ContentHeader title={title} textAlign={align} />}
diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx
index af5213e3f1..9a2bc0cfb1 100644
--- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx
+++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx
@@ -13,14 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { Entity } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
 import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render, waitFor } from '@testing-library/react';
 import * as React from 'react';
-import { ApiEntityPage, getPageTheme } from './ApiEntityPage';
+import { ApiEntityPage } from './ApiEntityPage';
 
 jest.mock('react-router-dom', () => {
   const actual = jest.requireActual('react-router-dom');
@@ -71,32 +69,3 @@ describe('ApiEntityPage', () => {
     );
   });
 });
-
-describe('getPageTheme', () => {
-  const defaultPageTheme = getPageTheme();
-  it.each(['service', 'app', 'library', 'tool', 'documentation', 'website'])(
-    'should select right theme for predefined type: %p ̰ ',
-    type => {
-      const theme = getPageTheme(({
-        spec: {
-          type,
-        },
-      } as any) as Entity);
-      expect(theme).toBeDefined();
-      expect(theme).not.toBe(defaultPageTheme);
-    },
-  );
-
-  it('should select default theme for unknown/unspecified types', () => {
-    const theme1 = getPageTheme(({
-      spec: {
-        type: 'unknown-type',
-      },
-    } as any) as Entity);
-    const theme2 = getPageTheme(({
-      spec: {},
-    } as any) as Entity);
-    expect(theme1).toBe(defaultPageTheme);
-    expect(theme2).toBe(defaultPageTheme);
-  });
-});
diff --git a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
index edfc3ab08b..85250a8569 100644
--- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
+++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
@@ -23,9 +23,9 @@ import {
   Progress,
   useApi,
 } from '@backstage/core';
-import { customPageTheme, PageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import { catalogApiRef } from '@backstage/plugin-catalog';
-import { Box } from '@material-ui/core';
+import { Box, useTheme } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -53,12 +53,6 @@ function headerProps(
   };
 }
 
-// REUSABLE IN plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
-export const getPageTheme = (entity?: Entity): PageTheme => {
-  const themeKey = entity?.spec?.type?.toString() ?? 'home';
-  return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home;
-};
-
 type EntityPageTitleProps = {
   title: string;
   entity: Entity | undefined;
@@ -71,6 +65,7 @@ const EntityPageTitle = ({ title }: EntityPageTitleProps) => (
 );
 
 export const ApiEntityPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const { optionalNamespaceAndName } = useParams() as {
     optionalNamespaceAndName: string;
   };
@@ -107,7 +102,11 @@ export const ApiEntityPage = () => {
   );
 
   return (
-    <Page pageTheme={getPageTheme(entity)}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: entity?.spec?.type?.toString() ?? 'home',
+      })}
+    >
       <Header
         title={<EntityPageTitle title={headerTitle} entity={entity} />}
         pageTitleOverride={headerTitle}
diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
index 53b50f1826..410432d715 100644
--- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
@@ -15,7 +15,8 @@
  */
 
 import { Header, Page } from '@backstage/core';
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
+import { useTheme } from '@material-ui/core';
 import React from 'react';
 
 type Props = {
@@ -23,8 +24,14 @@ type Props = {
 };
 
 export const ApiExplorerLayout = ({ children }: Props) => {
+  const backstageTheme = useTheme<BackstageTheme>();
+
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'home',
+      })}
+    >
       <Header
         title="APIs"
         subtitle="Backstage API Explorer"
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
index 9e7677709e..d7169946a9 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
@@ -21,7 +21,8 @@ import {
   Page,
   useApi,
 } from '@backstage/core';
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
+import { useTheme } from '@material-ui/core';
 import React from 'react';
 import { getTimeBasedGreeting } from './utils/timeUtil';
 
@@ -30,12 +31,13 @@ type Props = {
 };
 
 const CatalogLayout = ({ children }: Props) => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const greeting = getTimeBasedGreeting();
   const profile = useApi(identityApiRef).getProfile();
   const userId = useApi(identityApiRef).getUserId();
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
       <Header
         title={`${greeting.greeting}, ${profile.displayName || userId}!`}
         subtitle="Backstage Service Catalog"
diff --git a/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx b/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
index 103d07ca71..68e871009a 100644
--- a/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
+++ b/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
@@ -18,19 +18,19 @@ import { useParams, useNavigate } from 'react-router';
 
 import { EntityContext } from '../../hooks/useEntity';
 import { Page, Header, HeaderLabel, Content, Progress } from '@backstage/core';
-import { customPageTheme, PageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import { Entity } from '@backstage/catalog-model';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
-import { Box } from '@material-ui/core';
+import { Box, useTheme } from '@material-ui/core';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
 import { Alert } from '@material-ui/lab';
 import { Tabbed } from './Tabbed';
 
-const getPageTheme = (entity?: Entity): PageTheme => {
-  const themeKey = entity?.spec?.type?.toString() ?? 'home';
-  return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home;
-};
+// const getPageTheme = (entity?: Entity): PageTheme => {
+//   const themeKey = entity?.spec?.type?.toString() ?? 'home';
+//   return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home;
+// };
 
 const EntityPageTitle = ({
   entity,
@@ -69,6 +69,7 @@ export const EntityPageLayout = ({
 }: {
   children?: React.ReactNode;
 }) => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const { optionalNamespaceAndName, kind } = useParams() as {
     optionalNamespaceAndName: string;
     kind: string;
@@ -93,7 +94,11 @@ export const EntityPageLayout = ({
   const showRemovalDialog = () => setConfirmationDialogOpen(true);
 
   return (
-    <Page pageTheme={getPageTheme(entity!)}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: entity?.spec?.type?.toString() ?? 'home',
+      })}
+    >
       <Header
         title={<EntityPageTitle title={headerTitle} entity={entity!} />}
         pageTitleOverride={headerTitle}
diff --git a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx
index c0777fc844..d09b130b70 100644
--- a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx
+++ b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx
@@ -14,9 +14,15 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { ReactNode } from 'react';
-import { Box, Button, Container, makeStyles } from '@material-ui/core';
+import {
+  Box,
+  Button,
+  Container,
+  makeStyles,
+  useTheme,
+} from '@material-ui/core';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import { Header, Page } from '@backstage/core';
 import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';
@@ -37,10 +43,15 @@ const AlertInstructionsLayout = ({
   title,
   children,
 }: AlertInstructionsLayoutProps) => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const classes = useStyles();
   return (
     <CostInsightsThemeProvider>
-      <Page pageTheme={customPageTheme.pageTheme.tool}>
+      <Page
+        theme={backstageTheme.getPageTheme({
+          themeId: 'tool',
+        })}
+      >
         <Header title="Cost Insights" pageTitleOverride={title} type="Tool" />
         <Container maxWidth="md" disableGutters className={classes.root}>
           <Box mb={3}>
diff --git a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx b/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx
index c95f624bbe..068174cd68 100644
--- a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx
@@ -13,9 +13,9 @@
  * 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 from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, useTheme } from '@material-ui/core';
 import { Header, Page } from '@backstage/core';
 import { Group } from '../../types';
 import CostInsightsTabs from '../CostInsightsTabs';
@@ -39,9 +39,14 @@ type CostInsightsLayoutProps = {
 };
 
 const CostInsightsLayout = ({ groups, children }: CostInsightsLayoutProps) => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const classes = useStyles();
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Header
         style={{ boxShadow: 'none' }}
         title="Cost Insights"
diff --git a/plugins/explore/src/components/ExplorePluginPage.tsx b/plugins/explore/src/components/ExplorePluginPage.tsx
index 0e9ccd46e9..fd8d3f62f6 100644
--- a/plugins/explore/src/components/ExplorePluginPage.tsx
+++ b/plugins/explore/src/components/ExplorePluginPage.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles, Typography } from '@material-ui/core';
+import { makeStyles, Typography, useTheme } from '@material-ui/core';
 import {
   Content,
   ContentHeader,
@@ -24,7 +24,7 @@ import {
   SupportButton,
 } from '@backstage/core';
 import ExploreCard, { CardData } from './ExploreCard';
-import { customPageTheme, BackstageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   container: {
@@ -115,8 +115,14 @@ const toolsCards = [
 
 export const ExplorePluginPage = () => {
   const classes = useStyles();
+  const backstageTheme = useTheme<BackstageTheme>();
+
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'home',
+      })}
+    >
       <Header
         title="Explore"
         subtitle="Tools and services available in Backstage"
diff --git a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
index 446a06caef..da4d82d6d7 100644
--- a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
+++ b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -27,7 +27,7 @@ import {
   StructuredMetadataTable,
   SupportButton,
 } from '@backstage/core';
-import { Button, Grid, TextField } from '@material-ui/core';
+import { Button, Grid, TextField, useTheme } from '@material-ui/core';
 import React, { useState } from 'react';
 
 export const Project = () => {
@@ -112,8 +112,14 @@ const labels = (
 );
 
 export const NewProjectPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
+
   return (
-    <Page pageTheme={customPageTheme.pageTheme.service}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'service',
+      })}
+    >
       <Header title="New GCP Project" type="tool">
         {labels}
       </Header>
diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
index e310c27c68..eb86b6fd03 100644
--- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.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 {
   Content,
   ContentHeader,
@@ -36,6 +36,7 @@ import {
   TableRow,
   Theme,
   Typography,
+  useTheme,
 } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';
@@ -147,8 +148,13 @@ const labels = (
 );
 
 export const ProjectDetailsPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   return (
-    <Page pageTheme={customPageTheme.pageTheme.service}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'service',
+      })}
+    >
       <Header title="GCP Project Details" type="other">
         {labels}
       </Header>
diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
index 5a404dbb01..33b3813c2a 100644
--- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
@@ -15,7 +15,7 @@
  */
 
 //  NEEDS WORK
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -38,6 +38,7 @@ import {
   TableRow,
   Tooltip,
   Typography,
+  useTheme,
 } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';
@@ -134,8 +135,14 @@ const PageContents = () => {
 };
 
 export const ProjectListPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
+
   return (
-    <Page pageTheme={customPageTheme.pageTheme.service}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'service',
+      })}
+    >
       <Header title="GCP Projects" type="tool">
         {labels}
       </Header>
diff --git a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
index 8926ed3260..3b33320abe 100644
--- a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
+++ b/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>
diff --git a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx
index d51fb7656e..f7205c3326 100644
--- a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx
+++ b/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>
diff --git a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx
index 078e1b7601..fe1e97235a 100644
--- a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx
+++ b/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"
diff --git a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
index c43fc8d470..6d233b539b 100644
--- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
+++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.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 from 'react';
 import {
   Content,
@@ -27,9 +27,10 @@ import { useAsync } from 'react-use';
 import 'graphiql/graphiql.css';
 import { graphQlBrowseApiRef } from '../../lib/api';
 import { GraphiQLBrowser } from '../GraphiQLBrowser';
-import { Typography } from '@material-ui/core';
+import { Typography, useTheme } from '@material-ui/core';
 
 export const GraphiQLPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const graphQlBrowseApi = useApi(graphQlBrowseApiRef);
   const endpoints = useAsync(() => graphQlBrowseApi.getEndpoints());
 
@@ -59,7 +60,11 @@ export const GraphiQLPage = () => {
   }
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Header title="GraphiQL">
         <HeaderLabel label="Owner" value="Spotify" />
         <HeaderLabel label="Lifecycle" value="Alpha" />
diff --git a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
index 381b942f3d..70edc167f3 100644
--- a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
+++ b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { ReactElement, useEffect, useState } from 'react';
-import { Grid, TabProps } from '@material-ui/core';
+import { Grid, TabProps, useTheme } from '@material-ui/core';
 import {
   CardTab,
   Content,
@@ -98,6 +98,7 @@ const groupResponses = (fetchResponse: FetchResponse[]) => {
 type KubernetesContentProps = { entity: Entity; children?: React.ReactNode };
 
 export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const kubernetesApi = useApi(kubernetesApiRef);
 
   const [kubernetesObjects, setKubernetesObjects] = useState<
@@ -120,7 +121,11 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
     kubernetesObjects?.items.filter(r => r.errors.length > 0) ?? [];
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Content>
         <Grid container spacing={3} direction="column">
           {kubernetesObjects === undefined && error === undefined && (
diff --git a/plugins/lighthouse/src/components/AuditList/index.tsx b/plugins/lighthouse/src/components/AuditList/index.tsx
index 9c38e27fe3..cae1761ecb 100644
--- a/plugins/lighthouse/src/components/AuditList/index.tsx
+++ b/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"
diff --git a/plugins/lighthouse/src/components/AuditView/index.tsx b/plugins/lighthouse/src/components/AuditView/index.tsx
index b711aeb437..a336b3fff8 100644
--- a/plugins/lighthouse/src/components/AuditView/index.tsx
+++ b/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"
diff --git a/plugins/lighthouse/src/components/CreateAudit/index.tsx b/plugins/lighthouse/src/components/CreateAudit/index.tsx
index 0f001af0f1..8243b517b8 100644
--- a/plugins/lighthouse/src/components/CreateAudit/index.tsx
+++ b/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"
diff --git a/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx b/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx
index fa780b08aa..915172439f 100644
--- a/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx
+++ b/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { FC } from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, useTheme } from '@material-ui/core';
 import {
   Header,
   Page,
@@ -27,24 +27,30 @@ import {
 } from '@backstage/core';
 import NewRelicFetchComponent from '../NewRelicFetchComponent';
 
-const NewRelicComponent: FC<{}> = () => (
-  <Page pageTheme={customPageTheme.pageTheme.tool}>
-    <Header title="New Relic">
-      <HeaderLabel label="Owner" value="Engineering" />
-    </Header>
-    <Content>
-      <ContentHeader title="New Relic">
-        <SupportButton>
-          New Relic Application Performance Monitoring
-        </SupportButton>
-      </ContentHeader>
-      <Grid container spacing={3} direction="column">
-        <Grid item>
-          <NewRelicFetchComponent />
+const NewRelicComponent: FC<{}> = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
+  return (
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
+      <Header title="New Relic">
+        <HeaderLabel label="Owner" value="Engineering" />
+      </Header>
+      <Content>
+        <ContentHeader title="New Relic">
+          <SupportButton>
+            New Relic Application Performance Monitoring
+          </SupportButton>
+        </ContentHeader>
+        <Grid container spacing={3} direction="column">
+          <Grid item>
+            <NewRelicFetchComponent />
+          </Grid>
         </Grid>
-      </Grid>
-    </Content>
-  </Page>
-);
-
+      </Content>
+    </Page>
+  );
+};
 export default NewRelicComponent;
diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
index 5e4da3fc35..722e2e1964 100644
--- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
+++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { useState } from 'react';
-import { Grid, makeStyles } from '@material-ui/core';
+import { Grid, makeStyles, useTheme } from '@material-ui/core';
 import {
   InfoCard,
   Page,
@@ -61,6 +61,7 @@ export const RegisterComponentPage = ({
 }: {
   catalogRouteRef: RouteRef;
 }) => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const classes = useStyles();
   const catalogApi = useApi(catalogApiRef);
   const [formState, setFormState] = useState<ValuesOf<typeof FormStates>>(
@@ -113,7 +114,11 @@ export const RegisterComponentPage = ({
   };
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'home',
+      })}
+    >
       <Header title="Register existing component" />
       <Content>
         <ContentHeader title="Start tracking your component in Backstage">
diff --git a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx
index 9f0deca967..f219be9615 100644
--- a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx
+++ b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx
@@ -14,17 +14,23 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
+import { useTheme } from '@material-ui/core';
 import React from 'react';
 import { Content, Header, Page } from '@backstage/core';
 import { RollbarProjectTable } from '../RollbarProjectTable/RollbarProjectTable';
 import { useRollbarEntities } from '../../hooks/useRollbarEntities';
 
 export const RollbarHome = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const { entities, loading, error } = useRollbarEntities();
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Header
         title="Rollbar"
         subtitle="Real-time error tracking & debugging tools for developers"
diff --git a/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.tsx b/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.tsx
index c33c6b8ed3..3780056e3c 100644
--- a/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.tsx
+++ b/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.tsx
@@ -14,17 +14,23 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
+import { useTheme } from '@material-ui/core';
 import React from 'react';
 import { Content, Header, HeaderLabel, Page } from '@backstage/core';
 import { useCatalogEntity } from '../../hooks/useCatalogEntity';
 import { RollbarProject } from '../RollbarProject/RollbarProject';
 
 export const RollbarProjectPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const { entity } = useCatalogEntity();
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Header title={entity?.metadata?.name} subtitle="Rollbar Project">
         <HeaderLabel label="Owner" value={entity?.spec?.owner} />
         <HeaderLabel label="Lifecycle" value={entity?.spec?.lifecycle} />
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
index 1bd43ded44..bd70fd9565 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 import {
   Content,
@@ -29,7 +29,7 @@ import {
   WarningPanel,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
-import { Button, Grid, Link, Typography } from '@material-ui/core';
+import { Button, Grid, Link, Typography, useTheme } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import useStaleWhileRevalidate from 'swr';
@@ -49,6 +49,7 @@ const getTemplateCardProps = (
 };
 
 export const ScaffolderPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const catalogApi = useApi(catalogApiRef);
   const errorApi = useApi(errorApiRef);
 
@@ -66,7 +67,7 @@ export const ScaffolderPage = () => {
   }, [error, errorApi]);
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
       <Header
         pageTitleOverride="Create a New Component"
         title={
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 8437b9f533..2f9499311f 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -14,8 +14,14 @@
  * limitations under the License.
  */
 import { Button } from '@backstage/core';
-import { customPageTheme } from '@backstage/theme';
-import { Card, Chip, makeStyles, Typography } from '@material-ui/core';
+import { BackstageTheme, pageTheme } from '@backstage/theme';
+import {
+  Card,
+  Chip,
+  makeStyles,
+  Typography,
+  useTheme,
+} from '@material-ui/core';
 import React from 'react';
 import { generatePath } from 'react-router-dom';
 import { templateRoute } from '../../routes';
@@ -56,8 +62,10 @@ export const TemplateCard = ({
   type,
   name,
 }: TemplateCardProps) => {
-  const theme =
-    customPageTheme.pageTheme[type] ?? customPageTheme.pageTheme.other;
+  const backstageTheme = useTheme<BackstageTheme>();
+
+  const themeId = pageTheme[type] ? type : 'other';
+  const theme = backstageTheme.getPageTheme({ themeId });
   const classes = useStyles({ backgroundImage: theme.backgroundImage });
   const href = generatePath(templateRoute.path, { templateName: name });
 
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index 5067f7963d..7bfc1b78a2 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.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 { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 import {
   Content,
@@ -25,7 +25,7 @@ import {
   useApi,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
-import { LinearProgress } from '@material-ui/core';
+import { LinearProgress, useTheme } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -80,6 +80,7 @@ const REPO_FORMAT = {
 };
 
 export const TemplatePage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const errorApi = useApi(errorApiRef);
   const catalogApi = useApi(catalogApiRef);
   const scaffolderApi = useApi(scaffolderApiRef);
@@ -145,7 +146,7 @@ export const TemplatePage = () => {
   }
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
       <Header
         pageTitleOverride="Create a new component"
         title={
diff --git a/plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx b/plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx
index 17e66fd86c..64f88af46e 100644
--- a/plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx
+++ b/plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { FC, useState } from 'react';
-import { Grid } from '@material-ui/core';
+import { Grid, useTheme } from '@material-ui/core';
 import {
   Header,
   Page,
@@ -28,12 +28,17 @@ import { SentryPluginWidget } from '../SentryPluginWidget/SentryPluginWidget';
 import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 
 const SentryPluginPage: FC<{}> = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const [statsFor, setStatsFor] = useState<'12h' | '24h'>('12h');
   const toggleStatsFor = () => setStatsFor(statsFor === '12h' ? '12h' : '24h');
   const sentryProjectId = 'sample-sentry-project-id';
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'tool',
+      })}
+    >
       <Header title="Sentry" />
       <Content>
         <ContentHeader title="Issue on Sentry">
diff --git a/plugins/tech-radar/src/components/RadarPage.tsx b/plugins/tech-radar/src/components/RadarPage.tsx
index 58dcaec9af..d23061b094 100644
--- a/plugins/tech-radar/src/components/RadarPage.tsx
+++ b/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',
diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.tsx
index 11211e713c..149117ec00 100644
--- a/plugins/techdocs/src/reader/components/TechDocsHome.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsHome.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
 import { useAsync } from 'react-use';
 import { useNavigate, generatePath } from 'react-router-dom';
-import { Grid } from '@material-ui/core';
+import { Grid, useTheme } from '@material-ui/core';
 import {
   ItemCard,
   Progress,
@@ -31,6 +31,7 @@ import { catalogApiRef } from '@backstage/plugin-catalog';
 import { rootDocsRouteRef } from '../../plugin';
 
 export const TechDocsHome = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const catalogApi = useApi(catalogApiRef);
   const navigate = useNavigate();
 
@@ -43,7 +44,11 @@ export const TechDocsHome = () => {
 
   if (loading) {
     return (
-      <Page pageTheme={customPageTheme.pageTheme.documentation}>
+      <Page
+        theme={backstageTheme.getPageTheme({
+          themeId: 'documentation',
+        })}
+      >
         <Header
           title="Documentation"
           subtitle="Documentation available in Backstage"
@@ -57,7 +62,11 @@ export const TechDocsHome = () => {
 
   if (error) {
     return (
-      <Page pageTheme={customPageTheme.pageTheme.documentation}>
+      <Page
+        theme={backstageTheme.getPageTheme({
+          themeId: 'documentation',
+        })}
+      >
         <Header
           title="Documentation"
           subtitle="Documentation available in Backstage"
@@ -70,7 +79,11 @@ export const TechDocsHome = () => {
   }
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.documentation}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'documentation',
+      })}
+    >
       <Header
         title="Documentation"
         subtitle="Documentation available in Backstage"
diff --git a/plugins/techdocs/src/reader/components/TechDocsPage.tsx b/plugins/techdocs/src/reader/components/TechDocsPage.tsx
index aedca2545e..a1dadeb0bf 100644
--- a/plugins/techdocs/src/reader/components/TechDocsPage.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsPage.tsx
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
+import { useTheme } from '@material-ui/core';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Content, Page, useApi } from '@backstage/core';
@@ -24,6 +25,7 @@ import { TechDocsPageHeader } from './TechDocsPageHeader';
 import { techdocsApiRef } from '../../api';
 
 export const TechDocsPage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const [documentReady, setDocumentReady] = useState<boolean>(false);
   const { entityId } = useParams();
   const [kind, namespace, name] = entityId.split(':');
@@ -47,7 +49,11 @@ export const TechDocsPage = () => {
   };
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.documentation}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'documentation',
+      })}
+    >
       <TechDocsPageHeader
         metadataRequest={{
           mkdocs: mkdocsMetadataRequest,
diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
index 2ad29a7b9a..c29478374c 100644
--- a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
+++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import {
@@ -24,6 +24,7 @@ import {
   ListItem,
   ListItemText,
   Link,
+  useTheme,
 } from '@material-ui/core';
 import {
   Content,
@@ -39,12 +40,17 @@ import {
 } from '@backstage/core';
 
 const WelcomePage = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const appTitle =
     useApi(configApiRef).getOptionalString('app.title') ?? 'Backstage';
   const profile = { givenName: '' };
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.home}>
+    <Page
+      theme={backstageTheme.getPageTheme({
+        themeId: 'home',
+      })}
+    >
       <Header
         title={`Welcome ${profile.givenName || `to ${appTitle}`}`}
         subtitle="Let's start building a better developer experience"