Merge branch 'main' into initial-doc

reports/src/App.tsx

@@ -1,11 +1,11 @@
 import { RouterProvider, createHashRouter } from "react-router-dom";
 import { useReport } from "./capability/useReport";
-import "./App.css";
+import { CustomThemeProvider } from "./ThemeContext";
 
 function App() {
-  // FIXME use the report from the config
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const configuration = JSON.parse(document.getElementById("interuss_report_json")?.innerHTML || "{}");
+  const configuration = JSON.parse(
+    document.getElementById("interuss_report_json")?.innerHTML || "{}"
+  );
   console.log("Configuration:", configuration);
 
   const { loading, error, report, nav } = useReport(configuration);
@@ -16,7 +16,11 @@ function App() {
     return !error ? <div>Report not found</div> : <div>{error}</div>;
   }
   const router = createHashRouter(nav);
-  return <RouterProvider router={router} />;
+  return (
+    <CustomThemeProvider>
+      <RouterProvider router={router} />
+    </CustomThemeProvider>
+  );
 }
 
 export default App;

reports/src/ThemeContext.tsx

@@ -0,0 +1,87 @@
+import {
+  CssBaseline,
+  GlobalStyles,
+  Interpolation,
+  PaletteMode,
+  Theme,
+  ThemeProvider,
+  createTheme,
+  useMediaQuery,
+} from "@mui/material";
+import {
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+type ThemeContextProps = {
+  toggleColorMode: () => void;
+  colorMode: PaletteMode;
+};
+export const ThemeContext = createContext<ThemeContextProps>({
+  toggleColorMode: () => {},
+  colorMode: "light",
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const CustomThemeProvider = ({
+  children,
+}: PropsWithChildren<unknown>) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+  const [mode, setMode] = useState<PaletteMode>("light");
+
+  useEffect(
+    () => setMode(prefersDarkMode ? "dark" : "light"),
+    [prefersDarkMode]
+  );
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+        },
+        components: {
+          MuiChip: {
+            styleOverrides: {
+              root: {
+                borderRadius: 8,
+              },
+            },
+          },
+        },
+      }),
+    [mode]
+  );
+
+  const globalStyles: Interpolation<Theme> = (theme) => {
+    return {
+      body: {
+        backgroundColor:
+          theme.palette.mode === "light"
+            ? theme.palette.grey[100]
+            : theme.palette.grey[900],
+      },
+    };
+  };
+
+  const toggleColorMode = () =>
+    setMode((prevMode: PaletteMode) =>
+      prevMode === "light" ? "dark" : "light"
+    );
+
+  return (
+    <ThemeContext.Provider value={{ toggleColorMode, colorMode: mode }}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <GlobalStyles styles={globalStyles} />
+        {children}
+      </ThemeProvider>
+    </ThemeContext.Provider>
+  );
+};