feat: Add new theme consumer in Header [use useTheme consumer provided in material-ui]

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

@@ -13,10 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { customPageTheme } from '@backstage/theme';
 import React from 'react';
 import { Header } from '.';
 import { HeaderLabel } from '../HeaderLabel';
-import { Page, pageTheme } from '../Page';
+import { Page } from '../Page';
 
 export default {
   title: 'Header',
@@ -32,7 +33,7 @@ const labels = (
 );
 
 export const Home = () => (
-  <Page theme={pageTheme.home}>
+  <Page pageTheme={customPageTheme.pageTheme.home}>
     <Header title="Start/Home Page" type="home">
       {labels}
     </Header>
@@ -46,7 +47,7 @@ export const HomeWithSubtitle = () => (
 );
 
 export const Tool = () => (
-  <Page theme={pageTheme.tool}>
+  <Page pageTheme={customPageTheme.pageTheme.tool}>
     <Header title="Stand-alone tool" type="tool">
       {labels}
     </Header>
@@ -54,7 +55,7 @@ export const Tool = () => (
 );
 
 export const Service = () => (
-  <Page theme={pageTheme.service}>
+  <Page pageTheme={customPageTheme.pageTheme.service}>
     <Header title="Service component page" type="service">
       {labels}
     </Header>
@@ -62,7 +63,7 @@ export const Service = () => (
 );
 
 export const Website = () => (
-  <Page theme={pageTheme.website}>
+  <Page pageTheme={customPageTheme.pageTheme.website}>
     <Header title="Website component page" type="website">
       {labels}
     </Header>
@@ -70,7 +71,7 @@ export const Website = () => (
 );
 
 export const Library = () => (
-  <Page theme={pageTheme.library}>
+  <Page pageTheme={customPageTheme.pageTheme.library}>
     <Header title="Library component page" type="library">
       {labels}
     </Header>
@@ -78,7 +79,7 @@ export const Library = () => (
 );
 
 export const App = () => (
-  <Page theme={pageTheme.app}>
+  <Page pageTheme={customPageTheme.pageTheme.app}>
     <Header title="App component page" type="app">
       {labels}
     </Header>
@@ -86,7 +87,7 @@ export const App = () => (
 );
 
 export const Documentation = () => (
-  <Page theme={pageTheme.documentation}>
+  <Page pageTheme={customPageTheme.pageTheme.documentation}>
     <Header title="Documentation component page" type="documentation">
       {labels}
     </Header>
@@ -94,7 +95,7 @@ export const Documentation = () => (
 );
 
 export const Other = () => (
-  <Page theme={pageTheme.other}>
+  <Page pageTheme={customPageTheme.pageTheme.other}>
     <Header title="Other/generic component page" type="other">
       {labels}
     </Header>

packages/core/src/layout/Header/Header.tsx

@@ -14,12 +14,10 @@
  * limitations under the License.
  */
 
-import React, { ReactNode, CSSProperties, FC, useContext } from 'react';
+import React, { ReactNode, CSSProperties, FC } from 'react';
 import { Helmet } from 'react-helmet';
-import { Typography, Tooltip, makeStyles } from '@material-ui/core';
-import { BackstageTheme } from '@backstage/theme';
-
-import { PageThemeContext } from '../Page/Page';
+import { Typography, Tooltip, makeStyles, useTheme } from '@material-ui/core';
+import { BackstageTheme, BackstagePageThemeConsumer } from '@backstage/theme';
 
 const useStyles = makeStyles<BackstageTheme, { backgroundImage: string }>(
   theme => ({
@@ -163,8 +161,10 @@ export const Header: FC<Props> = ({
   type,
   typeLink,
 }) => {
-  const theme = useContext(PageThemeContext);
-  const classes = useStyles({ backgroundImage: theme.backgroundImage });
+  const theme = useTheme<BackstagePageThemeConsumer>();
+  const classes = useStyles({
+    backgroundImage: theme.pageTheme.backgroundImage,
+  });
   const documentTitle = pageTitleOverride || title;
   const pageTitle = title || pageTitleOverride;
   const titleTemplate = `${documentTitle} | %s | Backstage`;