Can toggle dark theme

geneit_app/src/App.tsx

@@ -1,4 +1,3 @@
-import { ThemeProvider, createTheme } from "@mui/material/styles";
 import React from "react";
 import { Route, Routes } from "react-router-dom";
 import "./App.css";
@@ -24,12 +23,6 @@ interface AuthContext {
 
 const AuthContextK = React.createContext<AuthContext | null>(null);
 
-const darkTheme = createTheme({
-  palette: {
-    mode: "dark", // TODO : switch back to light
-  },
-});
-
 /**
  * Core app
  */
@@ -42,7 +35,6 @@ export function App(): React.ReactElement {
   };
 
   return (
-    <ThemeProvider theme={darkTheme}>
     <AuthContextK.Provider value={context}>
       <Routes>
         <Route path="delete_account" element={<DeleteAccountRoute />} />
@@ -72,7 +64,6 @@ export function App(): React.ReactElement {
         )}
       </Routes>
     </AuthContextK.Provider>
-    </ThemeProvider>
   );
 }
 

geneit_app/src/context_providers/DarkThemeProvider.tsx

@@ -0,0 +1,50 @@
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import React from "react";
+import { PropsWithChildren } from "react";
+
+const localStorageKey = "dark-theme";
+
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
+const lightTheme = createTheme({
+  palette: {
+    mode: "light",
+  },
+});
+
+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)!;
+}

geneit_app/src/dialogs/CreateFamilyDialog.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { TextInputDialog } from "./TextInputDialog";
 import { ServerApi } from "../api/ServerApi";
 import { FamilyApi } from "../api/FamilyApi";
-import { useAlert } from "../widgets/AlertDialogProvider";
+import { useAlert } from "../context_providers/AlertDialogProvider";
 
 export function CreateFamilyDialog(p: {
   open: boolean;

geneit_app/src/dialogs/JoinFamilyDialog.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { TextInputDialog } from "./TextInputDialog";
 import { ServerApi } from "../api/ServerApi";
 import { FamilyApi, JoinFamilyResult } from "../api/FamilyApi";
-import { useAlert } from "../widgets/AlertDialogProvider";
+import { useAlert } from "../context_providers/AlertDialogProvider";
 
 export function JoinFamilyDialog(p: {
   open: boolean;

geneit_app/src/index.tsx

@@ -11,10 +11,11 @@ import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import { BrowserRouter } from "react-router-dom";
-import { ConfirmDialogProvider } from "./widgets/ConfirmDialogProvider";
+import { ConfirmDialogProvider } from "./context_providers/ConfirmDialogProvider";
-import { AlertDialogProvider } from "./widgets/AlertDialogProvider";
+import { AlertDialogProvider } from "./context_providers/AlertDialogProvider";
 import { AsyncWidget } from "./widgets/AsyncWidget";
-import { SnackbarProvider } from "./widgets/SnackbarProvider";
+import { SnackbarProvider } from "./context_providers/SnackbarProvider";
+import { DarkThemeProvider } from "./context_providers/DarkThemeProvider";
 
 async function init() {
   try {
@@ -25,6 +26,7 @@ async function init() {
     root.render(
       <React.StrictMode>
         <BrowserRouter>
+          <DarkThemeProvider>
             <AlertDialogProvider>
               <ConfirmDialogProvider>
                 <SnackbarProvider>
@@ -39,6 +41,7 @@ async function init() {
                 </SnackbarProvider>
               </ConfirmDialogProvider>
             </AlertDialogProvider>
+          </DarkThemeProvider>
         </BrowserRouter>
       </React.StrictMode>
     );

geneit_app/src/routes/DeleteAccountRoute.tsx

@@ -3,9 +3,9 @@ import React from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { AuthApi } from "../api/AuthApi";
 import { DeleteAccountTokenInfo, UserApi } from "../api/UserApi";
-import { useAlert } from "../widgets/AlertDialogProvider";
+import { useAlert } from "../context_providers/AlertDialogProvider";
 import { AsyncWidget } from "../widgets/AsyncWidget";
-import { useConfirm } from "../widgets/ConfirmDialogProvider";
+import { useConfirm } from "../context_providers/ConfirmDialogProvider";
 
 export function DeleteAccountRoute(): React.ReactElement {
   const alert = useAlert();

geneit_app/src/routes/FamiliesListRoute.tsx

@@ -14,9 +14,9 @@ import React from "react";
 import { Family, FamilyApi } from "../api/FamilyApi";
 import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
 import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
-import { useAlert } from "../widgets/AlertDialogProvider";
+import { useAlert } from "../context_providers/AlertDialogProvider";
 import { AsyncWidget } from "../widgets/AsyncWidget";
-import { useConfirm } from "../widgets/ConfirmDialogProvider";
+import { useConfirm } from "../context_providers/ConfirmDialogProvider";
 import { RouterLink } from "../widgets/RouterLink";
 import { TimeWidget } from "../widgets/TimeWidget";
 

geneit_app/src/routes/ProfileRoute.tsx

@@ -13,9 +13,9 @@ import {
 import React from "react";
 import { ServerApi } from "../api/ServerApi";
 import { ReplacePasswordResponse, User, UserApi } from "../api/UserApi";
-import { useAlert } from "../widgets/AlertDialogProvider";
+import { useAlert } from "../context_providers/AlertDialogProvider";
 import { useUser } from "../widgets/BaseAuthenticatedPage";
-import { useConfirm } from "../widgets/ConfirmDialogProvider";
+import { useConfirm } from "../context_providers/ConfirmDialogProvider";
 import { PasswordInput } from "../widgets/PasswordInput";
 import { formatDate } from "../widgets/TimeWidget";
 

geneit_app/src/widgets/BaseAuthenticatedPage.tsx

@@ -14,6 +14,7 @@ import { AuthApi } from "../api/AuthApi";
 import { User, UserApi } from "../api/UserApi";
 import { AsyncWidget } from "./AsyncWidget";
 import { RouterLink } from "./RouterLink";
+import { DarkThemeButton } from "./DarkThemeButton";
 
 interface UserContext {
   user: User;
@@ -90,6 +91,8 @@ export function BaseAuthenticatedPage(): React.ReactElement {
                 </Typography>
 
                 <div>
+                  <DarkThemeButton />
+
                   <Button size="large" color="inherit">
                     {user!.name}
                   </Button>

geneit_app/src/widgets/BaseFamilyRoute.tsx

@@ -27,9 +27,9 @@ import { Outlet, useLocation, useParams } from "react-router-dom";
 import { Family, FamilyApi } from "../api/FamilyApi";
 import { AsyncWidget } from "./AsyncWidget";
 import { RouterLink } from "./RouterLink";
-import { useSnackbar } from "./SnackbarProvider";
+import { useSnackbar } from "../context_providers/SnackbarProvider";
-import { useConfirm } from "./ConfirmDialogProvider";
+import { useConfirm } from "../context_providers/ConfirmDialogProvider";
-import { useAlert } from "./AlertDialogProvider";
+import { useAlert } from "../context_providers/AlertDialogProvider";
 
 interface FamilyContext {
   family: Family;

geneit_app/src/widgets/BaseLoginpage.tsx

@@ -8,6 +8,7 @@ import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { Link, Outlet } from "react-router-dom";
+import { DarkThemeButton } from "./DarkThemeButton";
 
 function Copyright(props: any) {
   return (
@@ -64,6 +65,10 @@ export function BaseLoginPage() {
             alignItems: "center",
           }}
         >
+          <div style={{ position: "absolute", right: "10px", top: "5px" }}>
+            <DarkThemeButton />
+          </div>
+
           <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
             <Icon path={mdiFamilyTree} size={1} />
           </Avatar>

geneit_app/src/widgets/DarkThemeButton.tsx

@@ -0,0 +1,19 @@
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import { IconButton, Tooltip } from "@mui/material";
+import { useDarkTheme } from "../context_providers/DarkThemeProvider";
+
+export function DarkThemeButton(): React.ReactElement {
+  const darkTheme = useDarkTheme();
+
+  return (
+    <Tooltip title="Activer / désactiver le mode sombre">
+      <IconButton
+        onClick={() => darkTheme.setEnabled(!darkTheme.enabled)}
+        style={{ color: "inherit" }}
+      >
+        {!darkTheme.enabled ? <DarkModeIcon /> : <Brightness7Icon />}
+      </IconButton>
+    </Tooltip>
+  );
+}