added themeType and made themes work with our whiteLabels

src/app/AuthHTTPWrapper.tsx

@@ -5,17 +5,29 @@ import HTTPProvider from '../providers/http'
 import { useState } from 'react'
 import LoadingScreen from './LoadingScreen'
 import UserWrapper from './UserWrapper'
-import { ThemeProvider } from '@mui/material'
-import theme from '../theme/theme'
+import { Theme, ThemeProvider } from '@mui/material'
+import { CreateTheme } from '../theme/theme'
+import { getThemeType, setThemeType } from '../theme/themeType'
 
 function AuthHTTPWrapper() {
   const [token, setToken] = useState<string | undefined>(undefined)
+  const [palette, setPalette] = useState<Theme>(CreateTheme("dark"));
 
   let url: string | undefined = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
   let audience: string | undefined = import.meta.env.VITE_AUTH0_AUDIENCE;
 
   let client_id = import.meta.env.VITE_AUTH0_DEV_CLIENT_ID;
 
+  const toggleTheme = () => {
+    if (getThemeType() === "light") {
+      setPalette(CreateTheme("dark"));
+      setThemeType("dark");
+    } else {
+      setPalette(CreateTheme("light"));
+      setThemeType("light");
+    }
+  };
+
   return (
     <Auth0Provider
       domain={or(url, "")}
@@ -27,7 +39,7 @@ function AuthHTTPWrapper() {
       useRefreshTokens={true}
       cacheLocation='localstorage'
     >
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={palette}>
         <AuthWrapper setToken={setToken}>
           { token ? 
             <HTTPProvider token={token}>

src/app/Header.tsx

@@ -61,7 +61,7 @@ interface Props {
     openSide: () => void;
     // teams: Team[];
     // setTeams: React.Dispatch<React.SetStateAction<Team[]>>;
-  }
+}
 
 export default function Header(props: Props) {
 

src/theme/theme.ts

@@ -1,4 +1,5 @@
-import { createTheme } from '@mui/material/styles';
+import * as Colours from "@mui/material/colors"
+import { createTheme, responsiveFontSizes, Theme, ThemeOptions } from '@mui/material/styles';
 import {
   getPrimaryColour,
   getSecondaryColour,
@@ -6,16 +7,145 @@ import {
   getSignatureColour
 } from "../services/whiteLabel";
 
-// import * as Colours from "@mui/material/colors";
-// Colours.
+export function CreateTheme(themeType: "light" | "dark"): Theme {
+  return responsiveFontSizes(createTheme(options(themeType)));
+}
 
-// let c = getPrimaryColour() as keyof typeof Colours
+function options(themeType: "light" | "dark"): ThemeOptions {
   
-// Define the custom theme
-const theme = createTheme({
+  const signature = getSignatureColour();
+  const accent = getSignatureAccentColour();
+  return {
     palette: {
-    primary: getPrimaryColour()
+      primary: Colours[getPrimaryColour() as keyof typeof Colours],
+      secondary: Colours[getSecondaryColour() as keyof typeof Colours],
+      background: Colours.grey,
+      type: themeType,
+      bxt: {
+        primaryBlue: "#005bb0",
+        lightBlue: "#1a86ec",
+        darkBlue: "#081d55",
+        rubberDuckYellow: "#ffd45c"
       },
-});
-
-export default theme;
+      status: {
+        succes: "#4caf50",
+        unknown: "0288d1",
+        unstable: "rgb(189, 200, 33)",
+        risk: "#ffd642",
+        warning: "#ffb74d",
+        alert: "#f44336"
+      }
+    },
+    typography: {
+      fontFamily: [
+        "Open Sans",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        '"Segoe UI"',
+        '"Helvetica Neue"',
+        "Arial",
+        "sans-serif",
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"'
+      ].join(",")
+    },
+    overrides: {
+      MuiAppBar: {
+        colorPrimary: {
+          backgroundColor: signature,
+          color: accent
+        }
+      },
+      MuiBottomNavigation: {
+        root: {
+          backgroundColor: signature
+        }
+      },
+      MuiBottomNavigationAction: {
+        root: {
+          backgroundColor: signature,
+          color: Colours["grey"][500],
+          "&$selected": {
+            color: accent
+          }
+        }
+      },
+      MuiCard: {
+        root: {
+          borderRadius: "5px",
+          "@media (min-width: 600px)": {
+            borderRadius: "7px"
+          }
+        }
+      },
+      MuiChip: {
+        root: {
+          "@media (max-width: 600px)": {
+            height: "24px"
+          }
+        },
+        avatar: {
+          "@media (max-width: 600px)": {
+            height: "24px",
+            width: "24px"
+          }
+        }
+      },
+      MuiDialog: {
+        paperFullScreen: {
+          overflowX: "hidden"
+        }
+      },
+      MuiSlider: {
+        root: {
+          height: 5
+        },
+        thumb: {
+          height: 18,
+          width: 18,
+          marginTop: -6,
+          marginLeft: -9,
+          "&:focus,&:hover,&$active": {
+            boxShadow: "inherit"
+          }
+        },
+        active: {},
+        valueLabel: {
+          left: "calc(-50% + 2px)"
+        },
+        track: {
+          height: 7,
+          borderRadius: 4
+        },
+        rail: {
+          height: 7,
+          borderRadius: 4
+        },
+        vertical: {
+          "& .MuiSlider-thumb": {
+            marginLeft: "-8px !important"
+          }
+        }
+      },
+      MuiStepper: {
+        root: {
+          background: "transparent"
+        }
+      },
+      MuiSwitch: {
+        switchBase: {
+          color: Colours.grey[400],
+          "&$checked": {
+            color: Colours.grey[100]
+          },
+          "&$checked + $track": {
+            color: Colours.grey[100]
+          }
+        },
+        checked: {},
+        track: {}
+      }
+    }
+  } as ThemeOptions;
+}

src/theme/themeType.ts

@@ -0,0 +1,10 @@
+export type ThemeType = "light" | "dark";
+
+export function getThemeType(): ThemeType {
+  let theme = localStorage.getItem("theme");
+  return theme === "light" ? "light" : "dark";
+}
+
+export function setThemeType(theme: ThemeType) {
+  localStorage.setItem("theme", theme);
+}