From f275ce04eafff06b3962ca00a99fadd5f3e7d6ee Mon Sep 17 00:00:00 2001
From: Daniel Ortiz Lira <dortiz@vmware.com>
Date: Mon, 27 Sep 2021 16:50:59 -0500
Subject: [PATCH] Condense documentation to focus in the overrides instead of
 theme creation

Signed-off-by: Daniel Ortiz Lira <dortiz@vmware.com>
---
 docs/getting-started/app-custom-theme.md | 95 ++++++------------------
 1 file changed, 22 insertions(+), 73 deletions(-)

diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md
index 0b162f07ed..241ae7ef03 100644
--- a/docs/getting-started/app-custom-theme.md
+++ b/docs/getting-started/app-custom-theme.md
@@ -162,14 +162,9 @@ wouldn't be enough to alter the `box-shadow` property or to add css rules that
 aren't already defined like a margin. For these cases you should also create an
 override.
 
-_Creating your custom overrides_
-
 ```ts
-import {
-  BackstageTheme,
-  createThemeOverrides as createBackstageOverrides,
-} from '@backstage/theme';
-
+import { createApp } from '@backstage/core-app-api';
+import { BackstageTheme, lightTheme } from '@backstage/theme';
 /**
  * The `@backstage/core-components` package exposes this type that
  * contains all Backstage and `material-ui` components that can be
@@ -178,84 +173,38 @@ import {
 import { BackstageOverrides } from '@backstage/core-components';
 
 export const createCustomThemeOverrides = (
-  _: BackstageTheme,
+  theme: BackstageTheme,
 ): BackstageOverrides => {
   return {
-    /**
-     * You can reference the component by the name it passed to the makeStyles function.
-     * in the previous example it was { name: 'BackstageHeader' }
-     */
     BackstageHeader: {
       header: {
+        width: 'auto',
         margin: '20px',
         boxShadow: 'none',
+        borderBottom: `4px solid ${theme.palette.primary.main}`,
       },
     },
   };
 };
 
-export const createOverrides = (theme: BackstageTheme): BackstageOverrides => ({
-  ...createBackstageOverrides(theme), // These are the overrides that Backstage applies to `material-ui` components
-  ...createCustomThemeOverrides(theme), // These are your custom overrides, either to `material-ui` components or to Backstage components.
-});
-```
-
-_Your custom theme that uses the overrides_
-
-```ts
-import { createTheme as createMuiTheme } from '@material-ui/core';
-import { AppTheme } from '@backstage/core-plugin-api';
-import {
-  BackstagePaletteOptions,
-  BackstageTheme,
-  BackstageThemeOptions,
-  PageTheme,
-  shapes,
-} from '@backstage/theme';
-
-import { createOverrides } from './customThemeOverrides';
-import { THEME_OPTIONS } from './themeOptions'; // This is the object created in the "Example of a custom theme" section
-
-export const createTheme = (
-  paletteOptions: BackstagePaletteOptions,
-): BackstageTheme => {
-  const pageTheme: PageTheme = {
-    colors: [],
-    shape: shapes.round,
-    backgroundImage: '',
-  };
-
-  const themeOptions: BackstageThemeOptions = {
-    palette: paletteOptions,
-    page: pageTheme,
-    getPageTheme: _ => pageTheme,
-  };
-
-  const baseTheme = createMuiTheme(themeOptions) as BackstageTheme;
-  const overrides = createOverrides(baseTheme);
-
-  return { ...baseTheme, overrides } as BackstageTheme;
-};
-
-export const CustomTheme: AppTheme = {
-  id: 'custom-theme',
-  title: 'Custom Theme',
-  variant: 'light',
-  theme: createTheme(THEME_OPTIONS),
-};
-```
-
-_Applying your custom theme with overrides_
-
-```ts
-import { createApp } from '@backstage/core-app-api';
-import { CustomTheme } from './theme/customTheme';
-
 const app = createApp({
-  apis,
-  themes: [CustomTheme],
-  plugins: Object.values(plugins),
-  ...
+  apis: ...,
+  plugins: ...,
+  themes: [{
+    id: 'my-theme',
+    title: 'My Custom Theme',
+    variant: 'light',
+    theme: {
+      ...lightTheme,
+      overrides: {
+        // These are the overrides that Backstage applies to `material-ui` components
+        ...lightTheme.overrides,
+        // These are your custom overrides, either to `material-ui` or Backstage components.
+        ...createCustomThemeOverrides(lightTheme),
+      },
+    },
+  }]
+});
 ```
 
 ## Custom Logo