How to Get Theme from Store and Switch the App Theme On react-admin?

This is right that expects the theme to be passed directly as a prop (theme={theme}), but since Redux is initialized inside , it’s not available at the top level.
To solve this, wrap in a component that connects to the Redux store and passes the theme as a prop.

Steps to Fix

Create a New AdminContainer Component

Since Redux is already set up inside , create a wrapper component (AdminContainer.jsx) that reads the theme from Redux and passes it to .
AdminContainer.jsx

import React from 'react';
import { useSelector } from 'react-redux';
import { Admin } from 'react-admin';
import Layout from './layout';
import login from './authProvider';
import dataProvider from './dataProvider';
import Theme from './store/reducers/themeReducer'; // Custom reducer
import Configuration from './pages/Configuration';
import { Route } from 'react-router-dom';

const AdminContainer = () => {
  const theme = useSelector((state) => state.theme); // Get theme from Redux

  return (
    <Admin
      theme={theme}  // Pass the Redux theme state to Admin
      customReducers={{ theme: Theme }}
      layout={Layout}
      authProvider={login}
      dataProvider={dataProvider}
      loginPage={LoginPage}
      locale="pt"
      customRoutes={[
        <Route
          key="configuration"
          path="/configuration"
          title="Configurações"
          component={Configuration}
        />
      ]}
    >
      {/* Your resources go here */}
    </Admin>
  );
};

export default AdminContainer;

Update App.js

Now modify App.js to include the Redux <Provider> and use AdminContainer.

App.jsx

import React from 'react';
import { Provider } from 'react-redux';
import store from './store'; // Your Redux store
import AdminContainer from './AdminContainer';

const App = () => {
  return (
    
      
    
  );
};

export default App;