add two themes for comparison

backstage/packages/app/src/App.tsx

@@ -37,6 +37,11 @@ import { HomePage } from './components/home/HomePage';
 import { PortalDocsPage } from './components/portal-docs/PortalDocsPage';
 import { searchPage } from './components/search/SearchPage';
 import { PrefixNavigate } from './components/utils/PrefixNavigate';
+import { ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import LightIcon from '@material-ui/icons/WbSunny';
+import { diamondTheme } from './themes/diamondTheme.ts'
+import { testTheme } from './themes/testTheme.ts'
 
 const app = createApp({
   apis,
@@ -55,6 +60,27 @@ const app = createApp({
       catalogIndex: catalogPlugin.routes.catalogIndex,
     });
   },
+
+  themes:[
+    {
+    id:'diamond-theme',
+    title: 'Diamond Theme',
+    variant: 'light',
+    icon: <LightIcon/>,
+    Provider: ({children})=>(
+      <UnifiedThemeProvider theme={diamondTheme} children={children}/>
+    )
+  },
+    {
+    id:'test-theme',
+    title: 'Test Theme',
+    variant: 'light',
+    icon: <p> test</p>,
+    Provider: ({children})=>(
+      <UnifiedThemeProvider theme={testTheme} children={children}/>
+    )
+  },
+  ]
 });
 
 const routes = (

backstage/packages/app/src/theme/diamondTheme.ts

@@ -0,0 +1,93 @@
+import {
+  createBaseThemeOptions,
+  createUnifiedTheme,
+  genPageTheme,
+  palettes,
+  shapes,
+} from '@backstage/theme';
+
+// https://diamondlightsource.github.io/web-ui-components/?path=/docs/theme-colours--docs
+// 50#FBFBFB
+// 75#F7F7F7
+// 100#E7ECEF
+// 200#CBD5E0
+// 300#39435E
+// 400#9BBBFA
+// 500#fcd021
+// 600#385BBD
+// 700#1040A1
+// 800#001d55
+
+const diamondPalette = {
+    primary: {
+      main: '#385BBD', // Based on 600#385BBD
+    },
+    secondary: {
+      main: '#CBD5E0', // Based on 200#CBD5E0
+    },
+    error: {
+      main: '#8c4351', // Keeping the same as no corresponding color provided
+    },
+    warning: {
+      main: '#fcd021', // Based on 500#fcd021
+    },
+    info: {
+      main: '#1040A1', // Based on 700#1040A1
+    },
+    success: {
+      main: '#39435E', // Based on 300#39435E
+    },
+    background: {
+      default: '#FBFBFB', // Based on 50#FBFBFB
+      paper: '#F7F7F7', // Based on 75#F7F7F7
+    },
+    banner: {
+      info: '#1040A1', // Based on 700#1040A1
+      error: '#8c4351', // Keeping the same as no corresponding color provided
+      text: '#39435E', // Based on 300#39435E
+      link: '#CBD5E0', // Based on 200#CBD5E0
+    },
+    errorBackground: '#8c4351', // Keeping the same as no corresponding color provided
+    warningBackground: '#fcd021', // Based on 500#fcd021
+    infoBackground: '#1040A1', // Based on 700#1040A1
+    navigation: {
+      background: '#001d55', // Based on 800#001d55
+      indicator: '#fcd021', // Based on 500#fcd021
+      color: '#E7ECEF', // Based on 100#E7ECEF
+      selectedColor: '#ffffff', // Keeping the same
+    },
+  };
+
+
+
+export const diamondTheme = createUnifiedTheme({
+  ...createBaseThemeOptions({
+    palette: { ...palettes.light, ...diamondPalette }
+  }),
+  defaultPageTheme: 'home',
+  fontFamily: 'monospace',
+  /* below drives the header colors */
+  pageTheme: {
+    home: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }),
+    documentation: genPageTheme({
+      colors: ['#8c4351', '#343b58'],
+      shape: shapes.wave2,
+    }),
+    tool: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.round }),
+    service: genPageTheme({
+      colors: ['#8c4351', '#343b58'],
+      shape: shapes.wave,
+    }),
+    website: genPageTheme({
+      colors: ['#8c4351', '#343b58'],
+      shape: shapes.wave,
+    }),
+    library: genPageTheme({
+      colors: ['#8c4351', '#343b58'],
+      shape: shapes.wave,
+    }),
+    other: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }),
+    app: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }),
+    apis: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }),
+  },
+});

backstage/packages/app/src/theme/testTheme.ts

@@ -0,0 +1,79 @@
+import {
+  createBaseThemeOptions,
+  createUnifiedTheme,
+  genPageTheme,
+  palettes,
+  shapes,
+} from '@backstage/theme';
+
+const testPalette = {
+      primary: {
+        main: '#343b58',
+      },
+      secondary: {
+        main: '#565a6e',
+      },
+      error: {
+        main: '#8c4351',
+      },
+      warning: {
+        main: '#8f5e15',
+      },
+      info: {
+        main: '#34548a',
+      },
+      success: {
+        main: '#485e30',
+      },
+      background: {
+        default: '#d5d6db',
+        paper: '#d5d6db',
+      },
+      banner: {
+        info: '#34548a',
+        error: '#8c4351',
+        text: '#343b58',
+        link: '#565a6e',
+      },
+      errorBackground: '#8c4351',
+      warningBackground: '#8f5e15',
+      infoBackground: '#343b58',
+      navigation: {
+        background: '#343b58',
+        indicator: '#8f5e15',
+        color: '#d5d6db',
+        selectedColor: '#ffffff',
+      },
+    };
+
+export const testTheme = createUnifiedTheme({
+  ...createBaseThemeOptions({
+    palette: { ...palettes.light, ...testPalette}
+  }),
+  defaultPageTheme: 'home',
+  fontFamily: 'Comic Sans MS',
+  /* below drives the header colors */
+  pageTheme: {
+    home: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }),
+    documentation: genPageTheme({
+      colors: ['#8c4351', '#343b58'],
+      shape: shapes.wave2,
+    }),
+    tool: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.round }),
+    service: genPageTheme({
+      colors: ['#8c4351', '#343b58'],
+      shape: shapes.wave,
+    }),
+    website: genPageTheme({
+      colors: ['#8c4351', '#343b58'],
+      shape: shapes.wave,
+    }),
+    library: genPageTheme({
+      colors: ['#8c4351', '#343b58'],
+      shape: shapes.wave,
+    }),
+    other: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }),
+    app: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }),
+    apis: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: shapes.wave }),
+  },
+});