From 75e184a0dd24dd1d302df7f73c01ed81dae2e95a Mon Sep 17 00:00:00 2001
From: Marvin9 <marvinduff97@gmail.com>
Date: Sun, 4 Oct 2020 18:05:16 +0530
Subject: [PATCH] chore: update new consumer variables in example md file &
 update in handlebars template

---
 .../docs/tutorials/quickstart-app-plugin/ExampleComponent.md   | 3 ++-
 .../src/components/ExampleComponent/ExampleComponent.tsx.hbs   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
index 855608c8b1..ed4bfc8012 100644
--- a/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
+++ b/contrib/docs/tutorials/quickstart-app-plugin/ExampleComponent.md
@@ -3,6 +3,7 @@
 ExampleComponent.tsx reference
 
 ```tsx
+import { customPageTheme } from '@backstage/theme';
 import React, { FC } from 'react';
 import { Typography, Grid } from '@material-ui/core';
 import {
@@ -25,7 +26,7 @@ const ExampleComponent: FC<{}> = () => {
   const profile = identityApi.getProfile();
 
   return (
-    <Page theme={pageTheme.tool}>
+    <Page pageTheme={customPageTheme.pageTheme.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 79adaefaa8..5b15ab0c70 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,3 +1,4 @@
+import { customPageTheme } from '@backstage/theme';
 import React, { FC } from 'react';
 import { Typography, Grid } from '@material-ui/core';
 import {
@@ -13,7 +14,7 @@ import {
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
 const ExampleComponent: FC<{}> = () => (
-  <Page theme={pageTheme.tool}>
+  <Page pageTheme={customPageTheme.pageTheme.tool}>
     <Header title="Welcome to {{ id }}!" subtitle="Optional subtitle">
       <HeaderLabel label="Owner" value="Team X" />
       <HeaderLabel label="Lifecycle" value="Alpha" />