Add ability to override theme options for the TechDocsReaderPage. (#25956)

* Add ability to override theme options for the TechDocsReaderPage.
---------

Signed-off-by: Sydney Achinger <sydneynicoleachinger@spotify.com>

.changeset/healthy-fireants-jump.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Allow for more granular control of TechDocsReaderPage styling. Theme overrides can now be provided to TechDocs without affecting the theme in other areas of Backstage.

plugins/techdocs/api-report.md

@@ -30,6 +30,7 @@ import { TechDocsApi as TechDocsApi_2 } from '@backstage/plugin-techdocs-react';
 import { TechDocsEntityMetadata as TechDocsEntityMetadata_2 } from '@backstage/plugin-techdocs-react';
 import { TechDocsMetadata as TechDocsMetadata_2 } from '@backstage/plugin-techdocs-react';
 import { TechDocsStorageApi as TechDocsStorageApi_2 } from '@backstage/plugin-techdocs-react';
+import { ThemeOptions } from '@material-ui/core/styles';
 import { ToolbarProps } from '@material-ui/core/Toolbar';
 import { UserListFilterKind } from '@backstage/plugin-catalog-react';
 
@@ -389,6 +390,7 @@ export type TechDocsReaderPageHeaderProps = PropsWithChildren<{
 export type TechDocsReaderPageProps = {
   entityRef?: CompoundEntityRef;
   children?: TechDocsReaderPageRenderFunction | ReactNode;
+  overrideThemeOptions?: Partial<ThemeOptions>;
 };
 
 // @public

plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.test.tsx

@@ -252,4 +252,30 @@ describe('<TechDocsReaderPage />', () => {
 
     expect(rendered.getByText('the page')).toBeInTheDocument();
   });
+
+  it('should apply overrideThemeOptions', async () => {
+    const overrideThemeOptions = {
+      typography: { fontFamily: 'Comic Sans MS' },
+    };
+
+    const rendered = await renderInTestApp(
+      <Wrapper>
+        <TechDocsReaderPage
+          entityRef={{
+            name: 'test-name',
+            namespace: 'test-namespace',
+            kind: 'test',
+          }}
+          overrideThemeOptions={overrideThemeOptions}
+        />
+      </Wrapper>,
+      {
+        mountedRoutes,
+      },
+    );
+
+    const text = rendered.getAllByText(mockTechDocsMetadata.site_name)[0];
+
+    expect(text).toHaveStyle('fontFamily: Comic Sans MS');
+  });
 });

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

@@ -37,6 +37,8 @@ import {
 } from '@backstage/core-plugin-api';
 
 import { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';
+import { ThemeOptions } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider, useTheme } from '@material-ui/core/styles';
 
 /* An explanation for the multiple ways of customizing the TechDocs reader page
 
@@ -151,6 +153,7 @@ export const TechDocsReaderLayout = (props: TechDocsReaderLayoutProps) => {
 export type TechDocsReaderPageProps = {
   entityRef?: CompoundEntityRef;
   children?: TechDocsReaderPageRenderFunction | ReactNode;
+  overrideThemeOptions?: Partial<ThemeOptions>;
 };
 
 /**
@@ -159,6 +162,12 @@ export type TechDocsReaderPageProps = {
  * @public
  */
 export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
+  const currentTheme = useTheme();
+
+  const readerPageTheme = createTheme({
+    ...currentTheme,
+    ...(props.overrideThemeOptions || {}),
+  });
   const { kind, name, namespace } = useRouteRefParams(rootDocsRouteRef);
   const { children, entityRef = { kind, name, namespace } } = props;
 
@@ -179,33 +188,37 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
 
     // As explained above, "page" is configuration 4 and <TechDocsReaderLayout> is 1
     return (
-      <CookieAuthRefreshProvider pluginId="techdocs">
-        <TechDocsReaderPageProvider entityRef={entityRef}>
-          {(page as JSX.Element) || <TechDocsReaderLayout />}
-        </TechDocsReaderPageProvider>
-      </CookieAuthRefreshProvider>
+      <ThemeProvider theme={readerPageTheme}>
+        <CookieAuthRefreshProvider pluginId="techdocs">
+          <TechDocsReaderPageProvider entityRef={entityRef}>
+            {(page as JSX.Element) || <TechDocsReaderLayout />}
+          </TechDocsReaderPageProvider>
+        </CookieAuthRefreshProvider>
+      </ThemeProvider>
     );
   }
 
   // As explained above, a render function is configuration 3 and React element is 2
   return (
-    <CookieAuthRefreshProvider pluginId="techdocs">
-      <TechDocsReaderPageProvider entityRef={entityRef}>
-        {({ metadata, entityMetadata, onReady }) => (
-          <div className="techdocs-reader-page">
-            <Page themeId="documentation">
-              {children instanceof Function
-                ? children({
-                    entityRef,
-                    techdocsMetadataValue: metadata.value,
-                    entityMetadataValue: entityMetadata.value,
-                    onReady,
-                  })
-                : children}
-            </Page>
-          </div>
-        )}
-      </TechDocsReaderPageProvider>
-    </CookieAuthRefreshProvider>
+    <ThemeProvider theme={readerPageTheme}>
+      <CookieAuthRefreshProvider pluginId="techdocs">
+        <TechDocsReaderPageProvider entityRef={entityRef}>
+          {({ metadata, entityMetadata, onReady }) => (
+            <div className="techdocs-reader-page">
+              <Page themeId="documentation">
+                {children instanceof Function
+                  ? children({
+                      entityRef,
+                      techdocsMetadataValue: metadata.value,
+                      entityMetadataValue: entityMetadata.value,
+                      onReady,
+                    })
+                  : children}
+              </Page>
+            </div>
+          )}
+        </TechDocsReaderPageProvider>
+      </CookieAuthRefreshProvider>
+    </ThemeProvider>
   );
 };