Use themeId in TemplateCard from theme object

The themeId should be picked up from the object to make sure that
when a custom theme is provided, it's pageTheme list is used instead
of one in the default theme package

Signed-off-by: Mustansar Anwar ul Samad <mustansar.samad@gmail.com>

.changeset/lovely-guests-smell.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Use themeId in TemplateCard from theme object

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

@@ -27,7 +27,7 @@ import {
   getEntityRelations,
   getEntitySourceLocation,
 } from '@backstage/plugin-catalog-react';
-import { BackstageTheme, pageTheme } from '@backstage/theme';
+import { BackstageTheme } from '@backstage/theme';
 import {
   Box,
   Card,
@@ -149,7 +149,9 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
     template as Entity,
     RELATION_OWNED_BY,
   );
-  const themeId = pageTheme[templateProps.type] ? templateProps.type : 'other';
+  const themeId = backstageTheme.getPageTheme({ themeId: templateProps.type })
+    ? templateProps.type
+    : 'other';
   const theme = backstageTheme.getPageTheme({ themeId });
   const classes = useStyles({ backgroundImage: theme.backgroundImage });
   const href = generatePath(`${rootLink()}/templates/:templateName`, {