techdocs: modify documentation header

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

@@ -85,6 +85,14 @@ export const App = () => (
   </Page>
 );
 
+export const Documentation = () => (
+  <Page theme={pageTheme.documentation}>
+    <Header title="Documentation component page" type="documentation">
+      {labels}
+    </Header>
+  </Page>
+);
+
 export const Other = () => (
   <Page theme={pageTheme.other}>
     <Header title="Other/generic component page" type="other">

packages/core/src/layout/Page/PageThemeProvider.ts

@@ -65,6 +65,11 @@ export const gradients: Record<string, Gradient> = {
     waveColor: '#9BF0E1',
     opacity: ['0.72', '0.0'],
   },
+  pinkSea: {
+    colors: ['#C8077A', '#C2297D'],
+    waveColor: '#ea93c3',
+    opacity: ['0.8', '0.0'],
+  },
 };
 
 export const pageTheme: Record<string, PageTheme> = {
@@ -72,7 +77,7 @@ export const pageTheme: Record<string, PageTheme> = {
     gradient: gradients.teal,
   },
   documentation: {
-    gradient: gradients.eveningSea,
+    gradient: gradients.pinkSea,
   },
   tool: {
     gradient: gradients.purpleSky,

plugins/techdocs/src/reader/components/TechDocsPageWrapper.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Header, Content } from '@backstage/core';
+import { Header, Content, Page, pageTheme } from '@backstage/core';
 
 type TechDocsPageWrapperProps = {
   title: string;
@@ -29,9 +29,9 @@ export const TechDocsPageWrapper = ({
   subtitle,
 }: TechDocsPageWrapperProps) => {
   return (
-    <>
+    <Page theme={pageTheme.documentation}>
       <Header title={title} subtitle={subtitle} />
       <Content>{children}</Content>
-    </>
+    </Page>
   );
 };