fix: themes provider deprecations

CONTRIBUTING.md

@@ -24,6 +24,46 @@ Then, if it appears that it's a real bug, you may report it using GitHub by foll
 
 Please base your changes on the `master` branch.
 
+
+### Testing Changes With the Distribution
+
+Start your project:
+
+```console
+docker compose up --wait
+```
+
+Clone the API Platform Admin repository:
+
+```console
+git clone https://github.com/api-platform/admin.git
+```
+
+Start your distribution-based project:
+
+```console
+cd <your-project>
+docker compose up --wait
+```
+
+Change the entrypoint of the API to use the one served by Docker in `pwa/pages/admin/index.tsx`:
+
+```patch
+-      setDynamicAdmin(<HydraAdmin entrypoint={window.origin}></HydraAdmin>);
++      setDynamicAdmin(<HydraAdmin entrypoint="https://localhost"</HydraAdmin>);
+```
+
+Link your local version of API Plarform Admin and start the PWA locally (outside Docker):
+
+```console
+cd pwa/
+pnpm link ../../admin
+pnpm run dev
+```
+
+
+
+
 ### Installing the Source Version
 
 To install the source version of API Platform Admin in your project and contribute a patch, follow the instructions below.

src/AdminGuesser.tsx

@@ -6,6 +6,7 @@ import {
   I18nContextProvider,
   Loading,
   ThemeProvider,
+  ThemesContext,
   defaultI18nProvider,
 } from 'react-admin';
 import { createHashHistory, createMemoryHistory } from 'history';
@@ -231,11 +232,17 @@ const AdminGuesserWithError = ({
 
   return (
     <I18nContextProvider value={i18nProvider}>
-      <ThemeProvider theme={theme}>
-        <ErrorBoundary onError={handleError} fallbackRender={renderError}>
-          <AdminGuesser {...props} i18nProvider={i18nProvider} theme={theme} />
-        </ErrorBoundary>
-      </ThemeProvider>
+      <ThemesContext.Provider value={theme}>
+        <ThemeProvider>
+          <ErrorBoundary onError={handleError} fallbackRender={renderError}>
+            <AdminGuesser
+              {...props}
+              i18nProvider={i18nProvider}
+              theme={theme}
+            />
+          </ErrorBoundary>
+        </ThemeProvider>
+      </ThemesContext.Provider>
     </I18nContextProvider>
   );
 };

src/layout/AppBar.tsx

@@ -9,7 +9,6 @@ import type { AppBarProps } from 'react-admin';
 import { Box, Typography } from '@mui/material';
 
 import Logo from './Logo.js';
-import { darkTheme, lightTheme } from './themes.js';
 
 const CustomAppBar = ({ classes, userMenu, ...props }: AppBarProps) => {
   const authProvider = useAuthProvider();
@@ -24,7 +23,7 @@ const CustomAppBar = ({ classes, userMenu, ...props }: AppBarProps) => {
       />
       <Logo />
       <Box component="span" sx={{ flex: 1 }} />
-      <ToggleThemeButton lightTheme={lightTheme} darkTheme={darkTheme} />
+      <ToggleThemeButton />
     </AppBar>
   );
 };