fix adds pagetheme colors

closes #5235

Signed-off-by: Remi Kristelijn <remi.kristelijn@theapsgroup.com>

docs/getting-started/app-custom-theme.md

@@ -74,3 +74,68 @@ Note that your list of custom themes overrides the default themes. If you still
 want to use the default themes, they are exported as `lightTheme` and
 `darkTheme` from
 [@backstage/theme](https://www.npmjs.com/package/@backstage/theme).
+
+## Example of a custom theme
+
+```ts
+const themeOptions = createThemeOptions({
+  palette: {
+    ...lightTheme.palette,
+    primary: {
+      main: '#123456',
+    },
+    secondary: {
+      main: '#123456',
+    },
+    error: {
+      main: '#123456'
+    },
+    warning: {
+      main: '#123456',
+    },
+    info: {
+      main: '#123456',
+    },
+    success: {
+      main: '#123456',
+    },
+    background: {
+      default: '#123456',
+      paper: '#123456',
+    },
+    banner: {
+      info: '#123456',
+      error: '#123456'
+      text: '#123456'
+      link: '#123456',
+    },
+    errorBackground: '#123456'
+    warningBackground: '#123456'
+    infoBackground: '#123456'
+    navigation: {
+      background: '#123456',
+      indicator: '#123456'
+      color: '#123456'
+      selectedColor: '#123456',
+    },
+  },
+  defaultPageTheme: 'home',
+  fontFamily: 'Comic Sans',
+  /* below drives the header colors */
+  pageTheme: {
+    home: genPageTheme(['#123456','#123456'], shapes.wave),
+    documentation: genPageTheme(['#123456','#123456'], shapes.wave2),
+    tool: genPageTheme(['#123456','#123456'], shapes.round),
+    service: genPageTheme(['#123456','#123456'], shapes.wave),
+    website: genPageTheme(['#123456','#123456'], shapes.wave),
+    library: genPageTheme(['#123456','#123456'] shapes.wave),
+    other: genPageTheme(['#123456','#123456'], shapes.wave),
+    app: genPageTheme(['#123456','#123456'], shapes.wave),
+    apis: genPageTheme(['#123456','#123456'], shapes.wave),
+    grpc: genPageTheme(['#123456','#123456'], shapes.wave2),
+    asyncapi: genPageTheme(['#123456','#123456'], shapes.wave2),
+    graphql: genPageTheme(['#123456','#123456'], shapes.wave2),
+    openapi: genPageTheme(['#123456','#123456'], shapes.wave2),
+  },
+});
+```

packages/core/src/layout/Header/Header.stories.tsx

@@ -45,6 +45,46 @@ export const HomeWithSubtitle = () => (
   </Header>
 );
 
+export const Apis = () => (
+  <Page themeId="apis">
+    <Header title="API catalogue" type="tool">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const Grpc = () => (
+  <Page themeId="grpc">
+    <Header title="Grpc catalogue" type="tool">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const AsyncApi = () => (
+  <Page themeId="asyncapi">
+    <Header title="Async API catalogue" type="tool">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const Graphql = () => (
+  <Page themeId="graphql">
+    <Header title="GraphQL API catalogue" type="tool">
+      {labels}
+    </Header>
+  </Page>
+);
+
+export const OpenApi = () => (
+  <Page themeId="openapi">
+    <Header title="OpenAPI catalogue" type="tool">
+      {labels}
+    </Header>
+  </Page>
+);
+
 export const Tool = () => (
   <Page themeId="tool">
     <Header title="Stand-alone tool" type="tool">

packages/theme/src/pageTheme.ts

@@ -63,4 +63,9 @@ export const pageTheme: Record<string, PageTheme> = {
   library: genPageTheme(colorVariants.rubyRed, shapes.wave),
   other: genPageTheme(colorVariants.darkGrey, shapes.wave),
   app: genPageTheme(colorVariants.toastyOrange, shapes.wave),
+  apis: genPageTheme(colorVariants.eveningSea, shapes.wave2),
+  grpc: genPageTheme(colorVariants.marineBlue, shapes.wave2),
+  asyncapi: genPageTheme(colorVariants.rubyRed, shapes.wave2),
+  graphql: genPageTheme(colorVariants.purpleSky, shapes.wave2),
+  openapi: genPageTheme(colorVariants.toastyOrange, shapes.wave2),
 };

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx

@@ -26,7 +26,7 @@ export const ApiExplorerLayout = ({ children }: Props) => {
     configApi.getOptionalString('organization.name') ?? 'Backstage'
   } API Explorer`;
   return (
-    <Page themeId="home">
+    <Page themeId="apis">
       <Header
         title="APIs"
         subtitle={generatedSubtitle}