From 461216de6505a87265cac088c56e35de3388d69d Mon Sep 17 00:00:00 2001
From: Joshua Jung <joshua.p.jung@gmail.com>
Date: Tue, 17 Sep 2024 19:35:12 -0500
Subject: [PATCH] Updating docs for issue 26754

Signed-off-by: Joshua Jung <joshua.p.jung@gmail.com>
---
 docs/features/search/how-to-guides.md | 53 ++++++++++++++++++++++-----
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/docs/features/search/how-to-guides.md b/docs/features/search/how-to-guides.md
index 93c04c7af4..7cbb5c3bb8 100644
--- a/docs/features/search/how-to-guides.md
+++ b/docs/features/search/how-to-guides.md
@@ -143,21 +143,54 @@ how highlighted terms look you can follow Backstage's guide on how to
 [Customize the look-and-feel of your App](https://backstage.io/docs/getting-started/app-custom-theme)
 to create an override with your preferred styling.
 
-For example, the following will result in highlighted terms to be bold & underlined:
+For example, using the new MUI V4+V5 unified theming method, the following will result
+in highlighted words to be bold & underlined:
 
-```tsx
-const highlightOverride = {
-  BackstageHighlightedSearchResultText: {
-    highlight: {
-      color: 'inherit',
-      backgroundColor: 'inherit',
-      fontWeight: 'bold',
-      textDecoration: 'underline',
+```typescript jsx title=packages/app/src/theme/theme.ts
+import {
+  createBaseThemeOptions,
+  createUnifiedTheme,
+  palettes,
+  UnifiedTheme,
+} from '@backstage/theme';
+
+export const myLightTheme: UnifiedTheme = createUnifiedTheme({
+  ...createBaseThemeOptions({
+    palette: palettes.light,
+  }),
+  defaultPageTheme: 'home',
+  components: {
+    /** @ts-ignore This is temporarily necessary until MUI V5 transition is completed. */
+    BackstageHighlightedSearchResultText: {
+      styleOverrides: {
+        highlight: {
+          color: 'inherit',
+          backgroundColor: 'inherit',
+          fontWeight: 'bold',
+          textDecoration: 'underline',
+        },
+      },
     },
   },
-};
+});
 ```
 
+```typescript jsx title= packages/app/src/App.tsx
+
+const app : BackstageApp = createApp({
+  ...
+  themes: [{
+    id: 'my-light-theme',
+    title: 'Light Theme',
+    variant: 'light',
+    icon: <LightIcon />,
+    Provider: ({ children }) => (<UnifiedThemeProvider theme={myLightTheme} children={children } />)
+  }]
+});
+```
+
+Obviously if you wanted a dark theme, you would need to provide that as well.
+
 ## How to render search results using extensions
 
 Extensions for search results let you customize components used to render search result items, It is possible to provide your own search result item extensions or use the ones provided by plugin packages.