Merge pull request #2739 from Marvin9/feat/flexible-theme-for-page

feat: theme customization for pages

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

@@ -22,7 +22,6 @@ import {
   Header,
   Lifecycle,
   Page,
-  pageTheme,
   Progress,
   SupportButton,
   useApi,
@@ -66,7 +65,7 @@ export const ScaffolderPage = () => {
   }, [error, errorApi]);
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page themeId="home">
       <Header
         pageTitleOverride="Create a New Component"
         title={

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

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

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

@@ -22,7 +22,6 @@ import {
   Lifecycle,
   Page,
   useApi,
-  pageTheme,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import { LinearProgress } from '@material-ui/core';
@@ -145,7 +144,7 @@ export const TemplatePage = () => {
   }
 
   return (
-    <Page theme={pageTheme.home}>
+    <Page themeId="home">
       <Header
         pageTitleOverride="Create a new component"
         title={