Ask user confirmation before leaving an unsaved form

geneit_app/src/hooks/context_providers/DarkThemeProvider.tsx

@@ -0,0 +1,57 @@
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import React from "react";
+import { PropsWithChildren } from "react";
+import { frFR as dataGridFr } from "@mui/x-data-grid";
+
+const localStorageKey = "dark-theme";
+
+const darkTheme = createTheme(
+  {
+    palette: {
+      mode: "dark",
+    },
+  },
+  dataGridFr
+);
+
+const lightTheme = createTheme(
+  {
+    palette: {
+      mode: "light",
+    },
+  },
+  dataGridFr
+);
+
+interface DarkThemeContext {
+  enabled: boolean;
+  setEnabled: (enabled: boolean) => void;
+}
+
+const DarkThemeContextK = React.createContext<DarkThemeContext | null>(null);
+
+export function DarkThemeProvider(p: PropsWithChildren): React.ReactElement {
+  const [enabled, setEnabled] = React.useState(
+    localStorage.getItem(localStorageKey) === "true"
+  );
+
+  return (
+    <DarkThemeContextK.Provider
+      value={{
+        enabled: enabled,
+        setEnabled(enabled) {
+          localStorage.setItem(localStorageKey, enabled ? "true" : "false");
+          setEnabled(enabled);
+        },
+      }}
+    >
+      <ThemeProvider theme={enabled ? darkTheme : lightTheme}>
+        {p.children}
+      </ThemeProvider>
+    </DarkThemeContextK.Provider>
+  );
+}
+
+export function useDarkTheme(): DarkThemeContext {
+  return React.useContext(DarkThemeContextK)!;
+}