diff --git a/packages/core/src/layout/Header/Header.stories.tsx b/packages/core/src/layout/Header/Header.stories.tsx
index f4ca74d3f8..62e6e3e52c 100644
--- a/packages/core/src/layout/Header/Header.stories.tsx
+++ b/packages/core/src/layout/Header/Header.stories.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { pageTheme } from '@backstage/theme';
 import React from 'react';
 import { Header } from '.';
 import { HeaderLabel } from '../HeaderLabel';
@@ -33,7 +32,7 @@ const labels = (
 );
 
 export const Home = () => (
-  <Page theme={pageTheme.home}>
+  <Page themeId="home">
     <Header title="Start/Home Page" type="home">
       {labels}
     </Header>
@@ -47,7 +46,7 @@ export const HomeWithSubtitle = () => (
 );
 
 export const Tool = () => (
-  <Page theme={pageTheme.tool}>
+  <Page themeId="tool">
     <Header title="Stand-alone tool" type="tool">
       {labels}
     </Header>
@@ -55,7 +54,7 @@ export const Tool = () => (
 );
 
 export const Service = () => (
-  <Page theme={pageTheme.service}>
+  <Page themeId="service">
     <Header title="Service component page" type="service">
       {labels}
     </Header>
@@ -63,7 +62,7 @@ export const Service = () => (
 );
 
 export const Website = () => (
-  <Page theme={pageTheme.website}>
+  <Page themeId="website">
     <Header title="Website component page" type="website">
       {labels}
     </Header>
@@ -71,7 +70,7 @@ export const Website = () => (
 );
 
 export const Library = () => (
-  <Page theme={pageTheme.library}>
+  <Page themeId="library">
     <Header title="Library component page" type="library">
       {labels}
     </Header>
@@ -79,7 +78,7 @@ export const Library = () => (
 );
 
 export const App = () => (
-  <Page theme={pageTheme.app}>
+  <Page themeId="app">
     <Header title="App component page" type="app">
       {labels}
     </Header>
@@ -87,7 +86,7 @@ export const App = () => (
 );
 
 export const Documentation = () => (
-  <Page theme={pageTheme.documentation}>
+  <Page themeId="documentation">
     <Header title="Documentation component page" type="documentation">
       {labels}
     </Header>
@@ -95,7 +94,7 @@ export const Documentation = () => (
 );
 
 export const Other = () => (
-  <Page theme={pageTheme.other}>
+  <Page themeId="other">
     <Header title="Other/generic component page" type="other">
       {labels}
     </Header>
diff --git a/packages/core/src/layout/Page/Page.stories.tsx b/packages/core/src/layout/Page/Page.stories.tsx
index 882b989bae..b3a75c19e9 100644
--- a/packages/core/src/layout/Page/Page.stories.tsx
+++ b/packages/core/src/layout/Page/Page.stories.tsx
@@ -15,7 +15,6 @@
  */
 
 import React, { useState } from 'react';
-import { pageTheme } from '@backstage/theme';
 import {
   Header,
   Page,
@@ -196,7 +195,7 @@ export const PluginWithData = () => {
   const [selectedTab, setSelectedTab] = useState<number>(2);
   return (
     <div style={{ border: '1px solid #ddd' }}>
-      <Page theme={pageTheme.tool}>
+      <Page themeId="tool">
         <ExampleHeader />
         <HeaderTabs
           selectedIndex={selectedTab}
@@ -218,7 +217,7 @@ export const PluginWithData = () => {
 export const PluginWithTable = () => {
   return (
     <div style={{ border: '1px solid #ddd' }}>
-      <Page theme={pageTheme.tool}>
+      <Page themeId="tool">
         <ExampleHeader />
         <Content>
           <ExampleContentHeader />
diff --git a/packages/core/src/layout/Page/Page.tsx b/packages/core/src/layout/Page/Page.tsx
index 4bc1917659..a14f772334 100644
--- a/packages/core/src/layout/Page/Page.tsx
+++ b/packages/core/src/layout/Page/Page.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { FC } from 'react';
-import { PageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, ThemeProvider } from '@material-ui/core';
 
 const useStyles = makeStyles(() => ({
@@ -30,13 +30,18 @@ const useStyles = makeStyles(() => ({
 }));
 
 type Props = {
-  theme: PageTheme;
+  themeId: string;
 };
 
-export const Page: FC<Props> = ({ theme, children }) => {
+export const Page: FC<Props> = ({ themeId, children }) => {
   const classes = useStyles();
   return (
-    <ThemeProvider theme={baseTheme => ({ ...baseTheme, page: theme })}>
+    <ThemeProvider
+      theme={(baseTheme: BackstageTheme) => ({
+        ...baseTheme,
+        page: baseTheme.getPageTheme({ themeId }),
+      })}
+    >
       <div className={classes.root}>{children}</div>
     </ThemeProvider>
   );
diff --git a/packages/core/src/layout/SignInPage/SignInPage.tsx b/packages/core/src/layout/SignInPage/SignInPage.tsx
index b2b049d161..ebc9bf278f 100644
--- a/packages/core/src/layout/SignInPage/SignInPage.tsx
+++ b/packages/core/src/layout/SignInPage/SignInPage.tsx
@@ -19,8 +19,7 @@ import { Page } from '../Page';
 import { Header } from '../Header';
 import { Content } from '../Content/Content';
 import { ContentHeader } from '../ContentHeader/ContentHeader';
-import { BackstageTheme } from '@backstage/theme';
-import { Grid, useTheme } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api';
 import { useSignInProviders, getSignInProviders } from './providers';
 import { IdentityProviders } from './types';
@@ -39,7 +38,6 @@ export const SignInPage: FC<Props> = ({
   title,
   align = 'left',
 }) => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const configApi = useApi(configApiRef);
   const classes = useStyles();
 
@@ -54,7 +52,7 @@ export const SignInPage: FC<Props> = ({
   }
 
   return (
-    <Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
+    <Page 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.tsx b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
index 85250a8569..f755705ac7 100644
--- a/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
+++ b/plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
@@ -23,9 +23,8 @@ import {
   Progress,
   useApi,
 } from '@backstage/core';
-import { BackstageTheme } from '@backstage/theme';
 import { catalogApiRef } from '@backstage/plugin-catalog';
-import { Box, useTheme } from '@material-ui/core';
+import { Box } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -65,7 +64,6 @@ const EntityPageTitle = ({ title }: EntityPageTitleProps) => (
 );
 
 export const ApiEntityPage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const { optionalNamespaceAndName } = useParams() as {
     optionalNamespaceAndName: string;
   };
@@ -102,11 +100,7 @@ export const ApiEntityPage = () => {
   );
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: entity?.spec?.type?.toString() ?? 'home',
-      })}
-    >
+    <Page 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 410432d715..b534489487 100644
--- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
@@ -15,8 +15,6 @@
  */
 
 import { Header, Page } from '@backstage/core';
-import { BackstageTheme } from '@backstage/theme';
-import { useTheme } from '@material-ui/core';
 import React from 'react';
 
 type Props = {
@@ -24,14 +22,8 @@ type Props = {
 };
 
 export const ApiExplorerLayout = ({ children }: Props) => {
-  const backstageTheme = useTheme<BackstageTheme>();
-
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'home',
-      })}
-    >
+    <Page 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 d7169946a9..e41aa5ef9d 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
@@ -21,8 +21,6 @@ import {
   Page,
   useApi,
 } from '@backstage/core';
-import { BackstageTheme } from '@backstage/theme';
-import { useTheme } from '@material-ui/core';
 import React from 'react';
 import { getTimeBasedGreeting } from './utils/timeUtil';
 
@@ -31,13 +29,12 @@ 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 theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
+    <Page 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 4958a6f850..e3a225a03e 100644
--- a/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
+++ b/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
@@ -18,10 +18,9 @@ import { useParams, useNavigate } from 'react-router';
 
 import { EntityContext } from '../../hooks/useEntity';
 import { Page, Header, HeaderLabel, Content, Progress } from '@backstage/core';
-import { BackstageTheme } from '@backstage/theme';
 import { Entity } from '@backstage/catalog-model';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
-import { Box, useTheme } from '@material-ui/core';
+import { Box } from '@material-ui/core';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
 import { Alert } from '@material-ui/lab';
@@ -64,7 +63,6 @@ export const EntityPageLayout = ({
 }: {
   children?: React.ReactNode;
 }) => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const { optionalNamespaceAndName, kind } = useParams() as {
     optionalNamespaceAndName: string;
     kind: string;
@@ -89,11 +87,7 @@ export const EntityPageLayout = ({
   const showRemovalDialog = () => setConfirmationDialogOpen(true);
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: entity?.spec?.type?.toString() ?? 'home',
-      })}
-    >
+    <Page 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 f4baf227db..82954baa86 100644
--- a/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx
+++ b/plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx
@@ -14,15 +14,8 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React, { ReactNode } from 'react';
-import {
-  Box,
-  Button,
-  Container,
-  makeStyles,
-  useTheme,
-} from '@material-ui/core';
+import { Box, Button, Container, makeStyles } from '@material-ui/core';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import { Header, Page } from '@backstage/core';
 import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';
@@ -44,13 +37,12 @@ const AlertInstructionsLayout = ({
   title,
   children,
 }: AlertInstructionsLayoutProps) => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const classes = useStyles();
   return (
     <CostInsightsThemeProvider>
       <ConfigProvider>
         <CurrencyProvider>
-          <Page theme={backstageTheme.getPageTheme({ themeId: 'tool' })}>
+          <Page themeId="tool">
             <Header
               title="Cost Insights"
               pageTitleOverride={title}
diff --git a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx b/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx
index 068174cd68..e2ca0fca93 100644
--- a/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx
@@ -13,9 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import { Header, Page } from '@backstage/core';
 import { Group } from '../../types';
 import CostInsightsTabs from '../CostInsightsTabs';
@@ -39,14 +38,9 @@ type CostInsightsLayoutProps = {
 };
 
 const CostInsightsLayout = ({ groups, children }: CostInsightsLayoutProps) => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const classes = useStyles();
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 fd8d3f62f6..f3e75e0011 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, useTheme } from '@material-ui/core';
+import { makeStyles, Typography } from '@material-ui/core';
 import {
   Content,
   ContentHeader,
@@ -115,14 +115,9 @@ const toolsCards = [
 
 export const ExplorePluginPage = () => {
   const classes = useStyles();
-  const backstageTheme = useTheme<BackstageTheme>();
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'home',
-      })}
-    >
+    <Page 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 da4d82d6d7..94cf6ce920 100644
--- a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
+++ b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -27,7 +26,7 @@ import {
   StructuredMetadataTable,
   SupportButton,
 } from '@backstage/core';
-import { Button, Grid, TextField, useTheme } from '@material-ui/core';
+import { Button, Grid, TextField } from '@material-ui/core';
 import React, { useState } from 'react';
 
 export const Project = () => {
@@ -112,14 +111,8 @@ const labels = (
 );
 
 export const NewProjectPage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
-
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'service',
-      })}
-    >
+    <Page 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 eb86b6fd03..7e44618441 100644
--- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -36,7 +35,6 @@ import {
   TableRow,
   Theme,
   Typography,
-  useTheme,
 } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';
@@ -148,13 +146,8 @@ const labels = (
 );
 
 export const ProjectDetailsPage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'service',
-      })}
-    >
+    <Page 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 33b3813c2a..b2148bcfc8 100644
--- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
@@ -15,7 +15,6 @@
  */
 
 //  NEEDS WORK
-import { BackstageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -38,7 +37,6 @@ import {
   TableRow,
   Tooltip,
   Typography,
-  useTheme,
 } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';
@@ -135,14 +133,8 @@ const PageContents = () => {
 };
 
 export const ProjectListPage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
-
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'service',
-      })}
-    >
+    <Page 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 3b33320abe..70bf4c8c3f 100644
--- a/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
+++ b/plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React, { FC, useState } from 'react';
 import {
   Content,
@@ -29,13 +28,12 @@ import {
 } from '@backstage/core';
 
 import ClusterTable from '../ClusterTable/ClusterTable';
-import { Button, useTheme } from '@material-ui/core';
+import { Button } 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);
@@ -92,11 +90,7 @@ const ClusterList: FC<{}> = () => {
   }
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'home',
-      })}
-    >
+    <Page 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 f7205c3326..9b6e5bdb08 100644
--- a/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx
+++ b/plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
 import React, { FC, useEffect, useState } from 'react';
 import {
   Content,
@@ -26,13 +25,12 @@ import {
   githubAuthApiRef,
 } from '@backstage/core';
 
-import { Link, useTheme } from '@material-ui/core';
+import { Link } 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);
@@ -85,11 +83,7 @@ const ClusterPage: FC<{}> = () => {
   }, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]);
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'home',
-      })}
-    >
+    <Page 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 fe1e97235a..a70cf97342 100644
--- a/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx
+++ b/plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React, { FC, useEffect, useState } from 'react';
 import {
   Header,
@@ -37,7 +36,7 @@ import {
   useApi,
   githubAuthApiRef,
 } from '@backstage/core';
-import { TextField, List, ListItem, Link, useTheme } from '@material-ui/core';
+import { TextField, List, ListItem, Link } from '@material-ui/core';
 
 import ClusterTemplateCardList from '../ClusterTemplateCardList';
 import ProfileCardList from '../ProfileCardList';
@@ -81,8 +80,6 @@ export const transformRunStatus = (x: Status[]) => {
 };
 
 const ProfileCatalog: FC<{}> = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
-
   // TODO: get data from REST API
   const [clusterTemplates] = React.useState([
     {
@@ -261,11 +258,7 @@ const ProfileCatalog: FC<{}> = () => {
   ];
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 6d233b539b..224def1d78 100644
--- a/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
+++ b/plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
 import {
   Content,
@@ -27,10 +26,9 @@ import { useAsync } from 'react-use';
 import 'graphiql/graphiql.css';
 import { graphQlBrowseApiRef } from '../../lib/api';
 import { GraphiQLBrowser } from '../GraphiQLBrowser';
-import { Typography, useTheme } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 
 export const GraphiQLPage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const graphQlBrowseApi = useApi(graphQlBrowseApiRef);
   const endpoints = useAsync(() => graphQlBrowseApi.getEndpoints());
 
@@ -60,11 +58,7 @@ export const GraphiQLPage = () => {
   }
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 451383df58..a3e82e79a4 100644
--- a/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
+++ b/plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React, { ReactElement, useEffect, useState } from 'react';
-import { Grid, TabProps, useTheme } from '@material-ui/core';
+import { Grid, TabProps } from '@material-ui/core';
 import { Config } from '@backstage/config';
 import {
   CardTab,
@@ -102,7 +101,6 @@ 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<
@@ -149,11 +147,7 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
     kubernetesObjects?.items.filter(r => r.errors.length > 0) ?? [];
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 cae1761ecb..117a40a901 100644
--- a/plugins/lighthouse/src/components/AuditList/index.tsx
+++ b/plugins/lighthouse/src/components/AuditList/index.tsx
@@ -13,11 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-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, useTheme } from '@material-ui/core';
+import { Grid, Button } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import Pagination from '@material-ui/lab/Pagination';
 import {
@@ -41,7 +40,6 @@ 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);
 
@@ -95,11 +93,7 @@ const AuditList: FC<{}> = () => {
   }
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 ecdc40fb98..4813be8bff 100644
--- a/plugins/lighthouse/src/components/AuditView/index.tsx
+++ b/plugins/lighthouse/src/components/AuditView/index.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
 import React, { useState, useEffect, ReactNode, FC } from 'react';
 import {
   Link,
@@ -31,7 +30,6 @@ import {
   Button,
   ListItemIcon,
   ListItemText,
-  useTheme,
 } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import {
@@ -194,13 +192,8 @@ export const AuditViewContent: FC<{}> = () => {
 };
 
 const ConnectedAuditView = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 6f746ebce6..ac4d2a2e3c 100644
--- a/plugins/lighthouse/src/components/CreateAudit/index.tsx
+++ b/plugins/lighthouse/src/components/CreateAudit/index.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
 import React, { useState, useCallback, FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
@@ -24,7 +23,6 @@ import {
   ListItem,
   MenuItem,
   TextField,
-  useTheme,
 } from '@material-ui/core';
 import {
   errorApiRef,
@@ -171,13 +169,8 @@ export const CreateAuditContent: FC<{}> = () => {
 };
 
 const CreateAudit = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 915172439f..5dea8b7ee6 100644
--- a/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx
+++ b/plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx
@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React, { FC } from 'react';
-import { Grid, useTheme } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import {
   Header,
   Page,
@@ -28,13 +27,8 @@ import {
 import NewRelicFetchComponent from '../NewRelicFetchComponent';
 
 const NewRelicComponent: FC<{}> = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page themeId="tool">
       <Header title="New Relic">
         <HeaderLabel label="Owner" value="Engineering" />
       </Header>
diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
index 722e2e1964..cd3eb1adbb 100644
--- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
+++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React, { useState } from 'react';
-import { Grid, makeStyles, useTheme } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
 import {
   InfoCard,
   Page,
@@ -61,7 +60,6 @@ export const RegisterComponentPage = ({
 }: {
   catalogRouteRef: RouteRef;
 }) => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const classes = useStyles();
   const catalogApi = useApi(catalogApiRef);
   const [formState, setFormState] = useState<ValuesOf<typeof FormStates>>(
@@ -114,11 +112,7 @@ export const RegisterComponentPage = ({
   };
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'home',
-      })}
-    >
+    <Page 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 f219be9615..fe99e70575 100644
--- a/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx
+++ b/plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx
@@ -14,23 +14,16 @@
  * limitations under the License.
  */
 
-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
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 3780056e3c..5563a6d7a0 100644
--- a/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.tsx
+++ b/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.tsx
@@ -14,23 +14,16 @@
  * limitations under the License.
  */
 
-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
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 bd70fd9565..d0cb25f254 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 import {
   Content,
@@ -29,7 +28,7 @@ import {
   WarningPanel,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
-import { Button, Grid, Link, Typography, useTheme } from '@material-ui/core';
+import { Button, Grid, Link, Typography } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import useStaleWhileRevalidate from 'swr';
@@ -49,7 +48,6 @@ const getTemplateCardProps = (
 };
 
 export const ScaffolderPage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const catalogApi = useApi(catalogApiRef);
   const errorApi = useApi(errorApiRef);
 
@@ -67,7 +65,7 @@ export const ScaffolderPage = () => {
   }, [error, errorApi]);
 
   return (
-    <Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
+    <Page themeId="home">
       <Header
         pageTitleOverride="Create a New Component"
         title={
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index 7bfc1b78a2..7cd1ce0243 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BackstageTheme } from '@backstage/theme';
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 import {
   Content,
@@ -25,7 +24,7 @@ import {
   useApi,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
-import { LinearProgress, useTheme } from '@material-ui/core';
+import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -80,7 +79,6 @@ const REPO_FORMAT = {
 };
 
 export const TemplatePage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const errorApi = useApi(errorApiRef);
   const catalogApi = useApi(catalogApiRef);
   const scaffolderApi = useApi(scaffolderApiRef);
@@ -146,7 +144,7 @@ export const TemplatePage = () => {
   }
 
   return (
-    <Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
+    <Page 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 64f88af46e..763a8d753f 100644
--- a/plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx
+++ b/plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx
@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React, { FC, useState } from 'react';
-import { Grid, useTheme } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import {
   Header,
   Page,
@@ -28,17 +27,12 @@ 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
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page 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 d23061b094..d5c4355b0e 100644
--- a/plugins/tech-radar/src/components/RadarPage.tsx
+++ b/plugins/tech-radar/src/components/RadarPage.tsx
@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
-import { Grid, useTheme } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import {
   Content,
   ContentHeader,
@@ -40,13 +39,8 @@ export const RadarPage = ({
   pageTitle,
   ...props
 }: TechRadarPageProps): JSX.Element => {
-  const backstageTheme = useTheme<BackstageTheme>();
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'tool',
-      })}
-    >
+    <Page themeId="tool">
       <Header title={title} subtitle={subtitle}>
         <HeaderLabel label="Owner" value="Spotify" />
         <HeaderLabel label="Lifecycle" value="Beta" />
diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.tsx
index 016f6df4f0..0408a540ca 100644
--- a/plugins/techdocs/src/reader/components/TechDocsHome.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsHome.tsx
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
 import { useAsync } from 'react-use';
 import { useNavigate, generatePath } from 'react-router-dom';
-import { Grid, useTheme } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import {
   ItemCard,
   Progress,
@@ -31,7 +30,6 @@ import { catalogApiRef } from '@backstage/plugin-catalog';
 import { rootDocsRouteRef } from '../../plugin';
 
 export const TechDocsHome = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const catalogApi = useApi(catalogApiRef);
   const navigate = useNavigate();
 
@@ -44,11 +42,7 @@ export const TechDocsHome = () => {
 
   if (loading) {
     return (
-      <Page
-        theme={backstageTheme.getPageTheme({
-          themeId: 'documentation',
-        })}
-      >
+      <Page themeId="documentation">
         <Header
           title="Documentation"
           subtitle="Documentation available in Backstage"
@@ -62,11 +56,7 @@ export const TechDocsHome = () => {
 
   if (error) {
     return (
-      <Page
-        theme={backstageTheme.getPageTheme({
-          themeId: 'documentation',
-        })}
-      >
+      <Page themeId="documentation">
         <Header
           title="Documentation"
           subtitle="Documentation available in Backstage"
@@ -79,11 +69,7 @@ export const TechDocsHome = () => {
   }
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'documentation',
-      })}
-    >
+    <Page 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 462ef86f1d..00f0b3c9d3 100644
--- a/plugins/techdocs/src/reader/components/TechDocsPage.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsPage.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-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';
@@ -25,7 +23,6 @@ import { TechDocsPageHeader } from './TechDocsPageHeader';
 import { techdocsApiRef } from '../../api';
 
 export const TechDocsPage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const [documentReady, setDocumentReady] = useState<boolean>(false);
   const { namespace, kind, name } = useParams();
 
@@ -48,11 +45,7 @@ export const TechDocsPage = () => {
   };
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'documentation',
-      })}
-    >
+    <Page themeId="documentation">
       <TechDocsPageHeader
         metadataRequest={{
           mkdocs: mkdocsMetadataRequest,
diff --git a/plugins/user-settings/src/components/SettingsPage.tsx b/plugins/user-settings/src/components/SettingsPage.tsx
index e8e5cbdbfd..0b4a86c99d 100644
--- a/plugins/user-settings/src/components/SettingsPage.tsx
+++ b/plugins/user-settings/src/components/SettingsPage.tsx
@@ -16,8 +16,6 @@
 
 import React, { useState } from 'react';
 import { Content, Header, HeaderTabs, Page } from '@backstage/core';
-import { BackstageTheme } from '@backstage/theme';
-import { useTheme } from '@material-ui/core';
 import { General } from './General';
 import { AuthProviders } from './AuthProviders';
 import { FeatureFlags } from './FeatureFlags';
@@ -27,7 +25,6 @@ type Props = {
 };
 
 export const SettingsPage = ({ providerSettings }: Props) => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const [activeTab, setActiveTab] = useState<number>(0);
   const onTabChange = (index: number) => {
     setActiveTab(index);
@@ -46,11 +43,7 @@ export const SettingsPage = ({ providerSettings }: Props) => {
   ];
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'home',
-      })}
-    >
+    <Page themeId="home">
       <Header title="Settings" />
       <HeaderTabs tabs={tabs} onChange={onTabChange} />
       <Content>{content[activeTab]}</Content>
diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
index 7c68ab96bf..7b94024948 100644
--- a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
+++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import {
@@ -24,7 +23,6 @@ import {
   ListItem,
   ListItemText,
   Link,
-  useTheme,
 } from '@material-ui/core';
 import {
   Content,
@@ -40,17 +38,12 @@ import {
 } from '@backstage/core';
 
 const WelcomePage = () => {
-  const backstageTheme = useTheme<BackstageTheme>();
   const appTitle =
     useApi(configApiRef).getOptionalString('app.title') ?? 'Backstage';
   const profile = { givenName: '' };
 
   return (
-    <Page
-      theme={backstageTheme.getPageTheme({
-        themeId: 'home',
-      })}
-    >
+    <Page themeId="home">
       <Header
         title={`Welcome ${profile.givenName || `to ${appTitle}`}`}
         subtitle="Let's start building a better developer experience"