feat: Replace old page theme props with new ones

plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx

@@ -20,11 +20,10 @@ import {
   errorApiRef,
   Header,
   Page,
-  pageTheme,
-  PageTheme,
   Progress,
   useApi,
 } from '@backstage/core';
+import { customPageTheme, PageTheme } from '@backstage/theme';
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import { Box } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
@@ -54,9 +53,10 @@ 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 pageTheme[themeKey] ?? pageTheme.home;
+  return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home;
 };
 
 type EntityPageTitleProps = {
@@ -107,7 +107,7 @@ export const ApiEntityPage = () => {
   );
 
   return (
-    <Page theme={getPageTheme(entity)}>
+    <Page pageTheme={getPageTheme(entity)}>
       <Header
         title={<EntityPageTitle title={headerTitle} entity={entity} />}
         pageTitleOverride={headerTitle}

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Header, Page, pageTheme } from '@backstage/core';
+import { Header, Page } from '@backstage/core';
+import { customPageTheme } from '@backstage/theme';
 import React from 'react';
 
 type Props = {
@@ -23,7 +24,7 @@ type Props = {
 
 export const ApiExplorerLayout = ({ children }: Props) => {
   return (
-    <Page theme={pageTheme.home}>
+    <Page pageTheme={customPageTheme.pageTheme.home}>
       <Header
         title="APIs"
         subtitle="Backstage API Explorer"

plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx

@@ -19,9 +19,9 @@ import {
   HomepageTimer,
   identityApiRef,
   Page,
-  pageTheme,
   useApi,
 } from '@backstage/core';
+import { customPageTheme } from '@backstage/theme';
 import React from 'react';
 import { getTimeBasedGreeting } from './utils/timeUtil';
 
@@ -35,7 +35,7 @@ const CatalogLayout = ({ children }: Props) => {
   const userId = useApi(identityApiRef).getUserId();
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page pageTheme={customPageTheme.pageTheme.home}>
       <Header
         title={`${greeting.greeting}, ${profile.displayName || userId}!`}
         subtitle="Backstage Service Catalog"

plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx

@@ -17,15 +17,8 @@ import React, { useState, useContext } from 'react';
 import { useParams, useNavigate } from 'react-router';
 
 import { EntityContext } from '../../hooks/useEntity';
-import {
-  pageTheme,
-  PageTheme,
-  Page,
-  Header,
-  HeaderLabel,
-  Content,
-  Progress,
-} from '@backstage/core';
+import { Page, Header, HeaderLabel, Content, Progress } from '@backstage/core';
+import { customPageTheme, PageTheme } from '@backstage/theme';
 import { Entity } from '@backstage/catalog-model';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 import { Box } from '@material-ui/core';
@@ -36,7 +29,7 @@ import { Tabbed } from './Tabbed';
 
 const getPageTheme = (entity?: Entity): PageTheme => {
   const themeKey = entity?.spec?.type?.toString() ?? 'home';
-  return pageTheme[themeKey] ?? pageTheme.home;
+  return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home;
 };
 
 const EntityPageTitle = ({
@@ -100,7 +93,7 @@ export const EntityPageLayout = ({
   const showRemovalDialog = () => setConfirmationDialogOpen(true);
 
   return (
-    <Page theme={getPageTheme(entity!)}>
+    <Page pageTheme={getPageTheme(entity!)}>
       <Header
         title={<EntityPageTitle title={headerTitle} entity={entity!} />}
         pageTitleOverride={headerTitle}

plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx

@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React, { ReactNode } from 'react';
 import { Box, Button, Container, makeStyles } from '@material-ui/core';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import { Header, Page, pageTheme } from '@backstage/core';
+import { Header, Page } from '@backstage/core';
 import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';
 
 const useStyles = makeStyles(theme => ({
@@ -39,7 +40,7 @@ const AlertInstructionsLayout = ({
   const classes = useStyles();
   return (
     <CostInsightsThemeProvider>
-      <Page theme={pageTheme.tool}>
+      <Page pageTheme={customPageTheme.pageTheme.tool}>
         <Header title="Cost Insights" pageTitleOverride={title} type="Tool" />
         <Container maxWidth="md" disableGutters className={classes.root}>
           <Box mb={3}>

plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { customPageTheme } from '@backstage/theme';
 import React from 'react';
 import { makeStyles } from '@material-ui/core';
-import { Header, Page, pageTheme } from '@backstage/core';
+import { Header, Page } from '@backstage/core';
 import { Group } from '../../types';
 import CostInsightsTabs from '../CostInsightsTabs';
 
@@ -41,7 +41,7 @@ type CostInsightsLayoutProps = {
 const CostInsightsLayout = ({ groups, children }: CostInsightsLayoutProps) => {
   const classes = useStyles();
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Header
         style={{ boxShadow: 'none' }}
         title="Cost Insights"

plugins/explore/src/components/ExplorePluginPage.tsx

@@ -21,11 +21,10 @@ import {
   ContentHeader,
   Header,
   Page,
-  pageTheme,
   SupportButton,
 } from '@backstage/core';
 import ExploreCard, { CardData } from './ExploreCard';
-import { BackstageTheme } from '@backstage/theme';
+import { customPageTheme, BackstageTheme } from '@backstage/theme';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   container: {
@@ -117,7 +116,7 @@ const toolsCards = [
 export const ExplorePluginPage = () => {
   const classes = useStyles();
   return (
-    <Page theme={pageTheme.home}>
+    <Page pageTheme={customPageTheme.pageTheme.home}>
       <Header
         title="Explore"
         subtitle="Tools and services available in Backstage"

plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -21,7 +22,6 @@ import {
   HeaderLabel,
   InfoCard,
   Page,
-  pageTheme,
   SimpleStepper,
   SimpleStepperStep,
   StructuredMetadataTable,
@@ -113,7 +113,7 @@ const labels = (
 
 export const NewProjectPage = () => {
   return (
-    <Page theme={pageTheme.service}>
+    <Page pageTheme={customPageTheme.pageTheme.service}>
       <Header title="New GCP Project" type="tool">
         {labels}
       </Header>

plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx

@@ -13,14 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { customPageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
   Header,
   HeaderLabel,
   Page,
-  pageTheme,
   SupportButton,
   useApi,
   WarningPanel,
@@ -149,7 +148,7 @@ const labels = (
 
 export const ProjectDetailsPage = () => {
   return (
-    <Page theme={pageTheme.service}>
+    <Page pageTheme={customPageTheme.pageTheme.service}>
       <Header title="GCP Project Details" type="other">
         {labels}
       </Header>

plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx

@@ -15,7 +15,7 @@
  */
 
 //  NEEDS WORK
-
+import { customPageTheme } from '@backstage/theme';
 import {
   Content,
   ContentHeader,
@@ -23,7 +23,6 @@ import {
   HeaderLabel,
   Link,
   Page,
-  pageTheme,
   SupportButton,
   useApi,
   WarningPanel,
@@ -136,7 +135,7 @@ const PageContents = () => {
 
 export const ProjectListPage = () => {
   return (
-    <Page theme={pageTheme.service}>
+    <Page pageTheme={customPageTheme.pageTheme.service}>
       <Header title="GCP Projects" type="tool">
         {labels}
       </Header>

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

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React, { FC, useState } from 'react';
 import {
   Content,
@@ -21,7 +22,6 @@ import {
   Header,
   SupportButton,
   Page,
-  pageTheme,
   Progress,
   HeaderLabel,
   useApi,
@@ -91,7 +91,7 @@ const ClusterList: FC<{}> = () => {
   }
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page pageTheme={customPageTheme.pageTheme.home}>
       <Header title="GitOps-managed Clusters">
         <HeaderLabel label="Welcome" value={githubUsername} />
       </Header>

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

@@ -13,13 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { customPageTheme } from '@backstage/theme';
 import React, { FC, useEffect, useState } from 'react';
 import {
   Content,
   Header,
   Page,
-  pageTheme,
   Table,
   Progress,
   HeaderLabel,
@@ -85,7 +84,7 @@ const ClusterPage: FC<{}> = () => {
   }, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]);
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page pageTheme={customPageTheme.pageTheme.home}>
       <Header title={`Cluster ${params.owner}/${params.repo}`}>
         <HeaderLabel label="Welcome" value={githubUsername} />
       </Header>

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

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React, { FC, useEffect, useState } from 'react';
 import {
   Header,
   Page,
-  pageTheme,
   Content,
   ContentHeader,
   HeaderLabel,
@@ -259,7 +259,7 @@ const ProfileCatalog: FC<{}> = () => {
   ];
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Header
         title="Create GitOps-managed Cluster"
         subtitle="Kubernetes cluster with ready-to-use profiles"

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 React from 'react';
 import {
   Content,
@@ -21,7 +21,6 @@ import {
   HeaderLabel,
   Page,
   Progress,
-  pageTheme,
   useApi,
 } from '@backstage/core';
 import { useAsync } from 'react-use';
@@ -60,7 +59,7 @@ export const GraphiQLPage = () => {
   }
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Header title="GraphiQL">
         <HeaderLabel label="Owner" value="Spotify" />
         <HeaderLabel label="Lifecycle" value="Alpha" />

plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { Grid, TabProps } from '@material-ui/core';
 import {
   CardTab,
   Content,
   Page,
-  pageTheme,
   Progress,
   TabbedCard,
   useApi,
@@ -120,7 +120,7 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
     kubernetesObjects?.items.filter(r => r.errors.length > 0) ?? [];
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Content>
         <Grid container spacing={3} direction="column">
           {kubernetesObjects === undefined && error === undefined && (

plugins/lighthouse/src/components/AuditList/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 React, { useState, useMemo, FC, ReactNode } from 'react';
 import { useLocalStorage, useAsync } from 'react-use';
 import { useNavigate } from 'react-router-dom';
@@ -28,7 +28,6 @@ import {
   ContentHeader,
   HeaderLabel,
   Progress,
-  pageTheme,
   useApi,
 } from '@backstage/core';
 
@@ -95,7 +94,7 @@ const AuditList: FC<{}> = () => {
   }
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Header
         title="Lighthouse"
         subtitle="Website audits powered by Lighthouse"

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

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { customPageTheme } from '@backstage/theme';
 import React, { useState, useEffect, ReactNode, FC } from 'react';
 import {
   Link,
@@ -34,7 +35,6 @@ import {
 import Alert from '@material-ui/lab/Alert';
 import {
   useApi,
-  pageTheme,
   InfoCard,
   Header,
   Page,
@@ -173,7 +173,7 @@ const ConnectedAuditView: FC<{}> = () => {
   }
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Header
         title="Lighthouse"
         subtitle="Website audits powered by Lighthouse"

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

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { customPageTheme } from '@backstage/theme';
 import React, { useState, useCallback, FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
@@ -30,7 +31,6 @@ import {
   InfoCard,
   Header,
   Page,
-  pageTheme,
   Content,
   ContentHeader,
   HeaderLabel,
@@ -94,7 +94,7 @@ const CreateAudit: FC<{}> = () => {
   ]);
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Header
         title="Lighthouse"
         subtitle="Website audits powered by Lighthouse"

plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React, { FC } from 'react';
 import { Grid } from '@material-ui/core';
 import {
   Header,
   Page,
-  pageTheme,
   Content,
   ContentHeader,
   HeaderLabel,
@@ -28,7 +28,7 @@ import {
 import NewRelicFetchComponent from '../NewRelicFetchComponent';
 
 const NewRelicComponent: FC<{}> = () => (
-  <Page theme={pageTheme.tool}>
+  <Page pageTheme={customPageTheme.pageTheme.tool}>
     <Header title="New Relic">
       <HeaderLabel label="Owner" value="Engineering" />
     </Header>

plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React, { useState } from 'react';
 import { Grid, makeStyles } from '@material-ui/core';
 import {
   InfoCard,
   Page,
-  pageTheme,
   Content,
   useApi,
   errorApiRef,
@@ -113,7 +113,7 @@ export const RegisterComponentPage = ({
   };
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page pageTheme={customPageTheme.pageTheme.home}>
       <Header title="Register existing component" />
       <Content>
         <ContentHeader title="Start tracking your component in Backstage">

plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React from 'react';
-import { Content, Header, Page, pageTheme } from '@backstage/core';
+import { Content, Header, Page } from '@backstage/core';
 import { RollbarProjectTable } from '../RollbarProjectTable/RollbarProjectTable';
 import { useRollbarEntities } from '../../hooks/useRollbarEntities';
 
@@ -23,7 +24,7 @@ export const RollbarHome = () => {
   const { entities, loading, error } = useRollbarEntities();
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Header
         title="Rollbar"
         subtitle="Real-time error tracking & debugging tools for developers"

plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.tsx

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React from 'react';
-import { Content, Header, HeaderLabel, Page, pageTheme } from '@backstage/core';
+import { Content, Header, HeaderLabel, Page } from '@backstage/core';
 import { useCatalogEntity } from '../../hooks/useCatalogEntity';
 import { RollbarProject } from '../RollbarProject/RollbarProject';
 
@@ -23,7 +24,7 @@ export const RollbarProjectPage = () => {
   const { entity } = useCatalogEntity();
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Header title={entity?.metadata?.name} subtitle="Rollbar Project">
         <HeaderLabel label="Owner" value={entity?.spec?.owner} />
         <HeaderLabel label="Lifecycle" value={entity?.spec?.lifecycle} />

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 import {
   Content,
@@ -22,7 +23,6 @@ import {
   Header,
   Lifecycle,
   Page,
-  pageTheme,
   Progress,
   SupportButton,
   useApi,
@@ -66,7 +66,7 @@ export const ScaffolderPage = () => {
   }, [error, errorApi]);
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page pageTheme={customPageTheme.pageTheme.home}>
       <Header
         pageTitleOverride="Create a New Component"
         title={

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Button, pageTheme } from '@backstage/core';
+import { Button } from '@backstage/core';
+import { customPageTheme } from '@backstage/theme';
 import { Card, Chip, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
 import { generatePath } from 'react-router-dom';
@@ -55,7 +56,8 @@ export const TemplateCard = ({
   type,
   name,
 }: TemplateCardProps) => {
-  const theme = pageTheme[type] ?? pageTheme.other;
+  const theme =
+    customPageTheme.pageTheme[type] ?? customPageTheme.pageTheme.other;
   const classes = useStyles({ backgroundImage: theme.backgroundImage });
   const href = generatePath(templateRoute.path, { templateName: name });
 

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { customPageTheme } from '@backstage/theme';
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
 import {
   Content,
@@ -22,7 +23,6 @@ import {
   Lifecycle,
   Page,
   useApi,
-  pageTheme,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import { LinearProgress } from '@material-ui/core';
@@ -145,7 +145,7 @@ export const TemplatePage = () => {
   }
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page pageTheme={customPageTheme.pageTheme.home}>
       <Header
         pageTitleOverride="Create a new component"
         title={

plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React, { FC, useState } from 'react';
 import { Grid } from '@material-ui/core';
 import {
   Header,
   Page,
-  pageTheme,
   Content,
   ContentHeader,
   SupportButton,
@@ -33,7 +33,7 @@ const SentryPluginPage: FC<{}> = () => {
   const sentryProjectId = 'sample-sentry-project-id';
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.tool}>
       <Header title="Sentry" />
       <Content>
         <ContentHeader title="Issue on Sentry">

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

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React from 'react';
 import { Grid } from '@material-ui/core';
 import {
@@ -23,7 +24,6 @@ import {
   Header,
   HeaderLabel,
   SupportButton,
-  pageTheme,
 } from '@backstage/core';
 import RadarComponent from '../components/RadarComponent';
 import { TechRadarComponentProps } from '../api';
@@ -40,7 +40,7 @@ export const RadarPage = ({
   pageTitle,
   ...props
 }: TechRadarPageProps): JSX.Element => (
-  <Page theme={pageTheme.tool}>
+  <Page pageTheme={customPageTheme.pageTheme.tool}>
     <Header title={title} subtitle={subtitle}>
       <HeaderLabel label="Owner" value="Spotify" />
       <HeaderLabel label="Lifecycle" value="Beta" />

plugins/techdocs/src/reader/components/TechDocsHome.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React from 'react';
 import { useAsync } from 'react-use';
 import { useNavigate, generatePath } from 'react-router-dom';
@@ -24,7 +25,6 @@ import {
   useApi,
   Content,
   Page,
-  pageTheme,
   Header,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
@@ -43,7 +43,7 @@ export const TechDocsHome = () => {
 
   if (loading) {
     return (
-      <Page theme={pageTheme.documentation}>
+      <Page pageTheme={customPageTheme.pageTheme.documentation}>
         <Header
           title="Documentation"
           subtitle="Documentation available in Backstage"
@@ -57,7 +57,7 @@ export const TechDocsHome = () => {
 
   if (error) {
     return (
-      <Page theme={pageTheme.documentation}>
+      <Page pageTheme={customPageTheme.pageTheme.documentation}>
         <Header
           title="Documentation"
           subtitle="Documentation available in Backstage"
@@ -70,7 +70,7 @@ export const TechDocsHome = () => {
   }
 
   return (
-    <Page theme={pageTheme.documentation}>
+    <Page pageTheme={customPageTheme.pageTheme.documentation}>
       <Header
         title="Documentation"
         subtitle="Documentation available in Backstage"

plugins/techdocs/src/reader/components/TechDocsPage.tsx

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Content, Page, pageTheme, useApi } from '@backstage/core';
+import { Content, Page, useApi } from '@backstage/core';
 import { Reader } from './Reader';
 import { useAsync } from 'react-use';
 import { TechDocsPageHeader } from './TechDocsPageHeader';
@@ -46,7 +47,7 @@ export const TechDocsPage = () => {
   };
 
   return (
-    <Page theme={pageTheme.documentation}>
+    <Page pageTheme={customPageTheme.pageTheme.documentation}>
       <TechDocsPageHeader
         metadataRequest={{
           mkdocs: mkdocsMetadataRequest,

plugins/welcome/src/components/WelcomePage/WelcomePage.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { customPageTheme } from '@backstage/theme';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import {
@@ -30,7 +31,6 @@ import {
   Header,
   HomepageTimer,
   Page,
-  pageTheme,
   ContentHeader,
   SupportButton,
   WarningPanel,
@@ -44,7 +44,7 @@ const WelcomePage = () => {
   const profile = { givenName: '' };
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page pageTheme={customPageTheme.pageTheme.home}>
       <Header
         title={`Welcome ${profile.givenName || `to ${appTitle}`}`}
         subtitle="Let's start building a better developer experience"