From 6bd9c5792744ce23e5da5adc697a9e3258f4853a Mon Sep 17 00:00:00 2001
From: Jonas Stjerne <jost@trifork.com>
Date: Sat, 20 Apr 2024 10:29:38 +0200
Subject: [PATCH] docs: fix custom theme examples

Signed-off-by: Jonas Stjerne <jost@trifork.com>
---
 docs/getting-started/app-custom-theme.md | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md
index 15fef0fb9a..32b3d9e541 100644
--- a/docs/getting-started/app-custom-theme.md
+++ b/docs/getting-started/app-custom-theme.md
@@ -19,7 +19,7 @@ import {
   palettes,
 } from '@backstage/theme';
 
-const myTheme = createUnifiedTheme({
+export const myTheme = createUnifiedTheme({
   ...createBaseThemeOptions({
     palette: palettes.light,
   }),
@@ -73,7 +73,7 @@ import {
   shapes,
 } from '@backstage/theme';
 
-const myTheme = createUnifiedTheme({
+export const myTheme = createUnifiedTheme({
   ...createBaseThemeOptions({
     palette: {
       ...palettes.light,
@@ -158,7 +158,7 @@ import {
   palettes,
 } from '@backstage/theme';
 
-const myTheme = createUnifiedTheme({
+export const myTheme = createUnifiedTheme({
   ...createBaseThemeOptions({
     palette: palettes.light,
     typography: {
@@ -210,7 +210,7 @@ import {
   palettes,
 } from '@backstage/theme';
 
-const myTheme = createUnifiedTheme({
+export const myTheme = createUnifiedTheme({
   ...createBaseThemeOptions({
     palette: palettes.light,
     typography: {
@@ -248,10 +248,11 @@ const myCustomFont = {
     local('My-Custom-Font'),
     url(${MyCustomFont}) format('woff2'),
   `,
-},
+};
 
 export const myTheme = createUnifiedTheme({
   fontFamily: 'My-Custom-Font',
+  palette: palettes.light,
   components: {
     MuiCssBaseline: {
       styleOverrides: {
@@ -259,7 +260,7 @@ export const myTheme = createUnifiedTheme({
       },
     },
   },
-};
+});
 ```
 
 If you want to utilize different or multiple fonts, then you can set the top level `fontFamily` to what you want for your body, and then override `fontFamily` in `typography` to control fonts for various headings.
@@ -277,7 +278,7 @@ const myCustomFont = {
     local('My-Custom-Font'),
     url(${MyCustomFont}) format('woff2'),
   `,
-},
+};
 
 const myAwesomeFont = {
   fontFamily: 'My-Awesome-Font',
@@ -288,7 +289,7 @@ const myAwesomeFont = {
     local('My-Awesome-Font'),
     url(${myAwesomeFont}) format('woff2'),
   `,
-},
+};
 
 export const myTheme = createUnifiedTheme({
   fontFamily: 'My-Custom-Font',
@@ -314,7 +315,7 @@ export const myTheme = createUnifiedTheme({
     },
     defaultPageTheme: 'home',
   }),
-};
+});
 ```
 
 ## Overriding Backstage and Material UI components styles
@@ -345,7 +346,7 @@ import {
   palettes,
 } from '@backstage/theme';
 
-const myTheme = createUnifiedTheme({
+export const myTheme = createUnifiedTheme({
   ...createBaseThemeOptions({
     palette: palettes.light,
   }),