Fix colour scheme

Author: noemifrisina

src/App.tsx

@@ -102,7 +102,7 @@ function App() {
       ]}
     >
       <FixedTargetPanels />
-      <Footer color={theme.palette.primary.main}>
+      <Footer logo={theme.logos?.short} color={theme.palette.primary.main}>
         {/* <Footer logo={theme.logos.normal} color={theme.palette.primary.main}> */}
         <FooterLinks>
           <ColourSchemeButton sx={{ marginLeft: "1px", marginTop: "2px" }} />

src/CustomTheme.tsx

@@ -1,6 +1,7 @@
-import logo from "./assets/logo.svg";
-
-import { DiamondTheme } from "@diamondlightsource/sci-react-ui";
+import {
+  mergeThemeOptions,
+  DiamondThemeOptions,
+} from "@diamondlightsource/sci-react-ui";
 import { createTheme, Theme } from "@mui/material";
 
 // Augment the palette to include a custom color
@@ -21,57 +22,46 @@ declare module "@mui/material/Button" {
   }
 }
 
-export const I24DiamondTheme: Theme = createTheme({
-  ...DiamondTheme,
-  logos: {
-    normal: {
-      src: logo,
-      srcDark: logo,
-      alt: "DLS logo",
-    },
-  },
-  colorSchemes: {
-    dark: {
-      palette: {
-        primary: {
-          main: "#202740",
-          light: "#4C5266",
-          dark: "#161B2C",
-        },
-        secondary: {
-          main: "#facf07",
-          light: "#FBD838", // light yellow
-          dark: "#AF9004", // dark yellow
+const I24DiamondThemeOptions = mergeThemeOptions(
+  {
+    colorSchemes: {
+      light: {
+        palette: {
+          custom: {
+            main: "#1976d2",
+            light: "#68a0e2",
+            dark: "#10569b",
+            contrastText: "#ffffff", // white
+          },
         },
-        custom: {
-          main: "#1976d2",
-          light: "#68a0e2",
-          dark: "#10569b",
-          contrastText: "#ffffff", // white
-        },
-        background: {
-          default: "#050505",
-          paper: "#121212",
+      },
+      dark: {
+        palette: {
+          primary: {
+            main: "#202740",
+            light: "#4C5266",
+            dark: "#161B2C",
+          },
+          secondary: {
+            main: "#facf07",
+            light: "#FBD838", // light yellow
+            dark: "#AF9004", // dark yellow
+          },
+          custom: {
+            main: "#1976d2",
+            light: "#68a0e2",
+            dark: "#10569b",
+            contrastText: "#ffffff", // white
+          },
+          background: {
+            default: "#050505",
+            paper: "#121212",
+          },
         },
       },
     },
   },
-});
-
-// To be improved and extended to light mode once
-// https://github.com/DiamondLightSource/sci-react-ui/pull/70
-// is merged and released (v0.2.0)
+  DiamondThemeOptions
+);
 
-/** Set up a customisable theme derived from the common DiamondTheme
- * This way it should be possible to easily add settings if required
- * eg. to add colorescheme options
- * colorSchemes: {
- *   dark: {
- *     palette: {
- *       background: {
- *         default: "121212",
- *         paper: "121212",
- *       },
- *     },
- *   },
- * }, */
+export const I24DiamondTheme: Theme = createTheme(I24DiamondThemeOptions);