From a4aa277e9f4447e253bf9c58b0aabb0eeb73bea5 Mon Sep 17 00:00:00 2001
From: Marvin9 <marvinduff97@gmail.com>
Date: Sun, 11 Oct 2020 19:35:01 +0530
Subject: [PATCH] fix: Replace new theme strategy consumer in handlebar
 template & Example md file

---
 .../tutorials/quickstart-app-plugin/ExampleComponent.md    | 7 ++++---
 .../components/ExampleComponent/ExampleComponent.tsx.hbs   | 6 +++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
index ed4bfc8012..83b18bf4c2 100644
--- a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
+++ b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
@@ -3,9 +3,9 @@
 ExampleComponent.tsx reference
 
 ```tsx
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { FC } from 'react';
-import { Typography, Grid } from '@material-ui/core';
+import { Typography, Grid, useTheme } from '@material-ui/core';
 import {
   InfoCard,
   Header,
@@ -21,12 +21,13 @@ import { useApi } from '@backstage/core-api';
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
 const ExampleComponent: FC<{}> = () => {
+  const backstageTheme = useTheme<BackstageTheme>();
   const identityApi = useApi(identityApiRef);
   const userId = identityApi.getUserId();
   const profile = identityApi.getProfile();
 
   return (
-    <Page pageTheme={customPageTheme.pageTheme.tool}>
+    <Page theme={backstageTheme.getPageTheme({ themeId: 'tool' })}>
       <Header
         title="Welcome to github-playground!"
         subtitle="Optional subtitle"
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
index a050ccd2ec..9cdd22c0ca 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
@@ -1,6 +1,6 @@
-import { customPageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import React, { FC } from 'react';
-import { Typography, Grid } from '@material-ui/core';
+import { Typography, Grid, useTheme } from '@material-ui/core';
 import {
   InfoCard,
   Header,
@@ -13,7 +13,7 @@ import {
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
 const ExampleComponent: FC<{}> = () => (
-  <Page pageTheme={customPageTheme.pageTheme.tool}>
+  <Page theme={backstageTheme.getPageTheme({ themeId: 'tool' })}>
     <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
       <HeaderLabel label="Owner" value="Team X" />
       <HeaderLabel label="Lifecycle" value="Alpha" />