Use page theme fontColor consistently in scaffolder headers and cards.

This fixes problems with themes with white header background, which
end up with white-on-white text for card heads and context menus.

Signed-off-by: Axel Hecht <axel@pike.org>

plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx

@@ -21,17 +21,22 @@ import { BackstageTheme } from '@backstage/theme';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { FavoriteEntity } from '@backstage/plugin-catalog-react';
 
-const useStyles = makeStyles<BackstageTheme, { cardBackgroundImage: string }>(
-  () => ({
-    header: {
-      backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,
-    },
-    subtitleWrapper: {
-      display: 'flex',
-      justifyContent: 'space-between',
-    },
-  }),
-);
+const useStyles = makeStyles<
+  BackstageTheme,
+  {
+    cardFontColor: string;
+    cardBackgroundImage: string;
+  }
+>(() => ({
+  header: {
+    backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,
+    color: ({ cardFontColor }) => cardFontColor,
+  },
+  subtitleWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+}));
 
 /**
  * Props for the CardHeader component
@@ -54,6 +59,7 @@ export const CardHeader = (props: CardHeaderProps) => {
   const themeForType = getPageTheme({ themeId: type });
 
   const styles = useStyles({
+    cardFontColor: themeForType.fontColor,
     cardBackgroundImage: themeForType.backgroundImage,
   });