feat: update theme provider in Page component, to override page theme in children

packages/core/src/layout/Page/Page.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useState } from 'react';
-import { customPageTheme } from '@backstage/theme';
+import { pageTheme } from '@backstage/theme';
 import {
   Header,
   Page,
@@ -196,7 +196,7 @@ export const PluginWithData = () => {
   const [selectedTab, setSelectedTab] = useState<number>(2);
   return (
     <div style={{ border: '1px solid #ddd' }}>
-      <Page pageTheme={customPageTheme.pageTheme.tool}>
+      <Page theme={pageTheme.tool}>
         <ExampleHeader />
         <HeaderTabs
           selectedIndex={selectedTab}
@@ -218,7 +218,7 @@ export const PluginWithData = () => {
 export const PluginWithTable = () => {
   return (
     <div style={{ border: '1px solid #ddd' }}>
-      <Page pageTheme={customPageTheme.pageTheme.tool}>
+      <Page theme={pageTheme.tool}>
         <ExampleHeader />
         <Content>
           <ExampleContentHeader />

packages/core/src/layout/Page/Page.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { FC } from 'react';
-import { customPageTheme, PageTheme } from '@backstage/theme';
+import { PageTheme } from '@backstage/theme';
 import { makeStyles, ThemeProvider } from '@material-ui/core';
 
 const useStyles = makeStyles(() => ({
@@ -30,16 +30,13 @@ const useStyles = makeStyles(() => ({
 }));
 
 type Props = {
-  pageTheme?: PageTheme;
+  theme: PageTheme;
 };
 
-export const Page: FC<Props> = ({
-  pageTheme = customPageTheme.pageTheme.home,
-  children,
-}) => {
+export const Page: FC<Props> = ({ theme, children }) => {
   const classes = useStyles();
   return (
-    <ThemeProvider theme={{ pageTheme, ...customPageTheme.baseTheme }}>
+    <ThemeProvider theme={baseTheme => ({ ...baseTheme, page: theme })}>
       <div className={classes.root}>{children}</div>
     </ThemeProvider>
   );