If you want to dynamically switch the App Theme in a React-Admin app using Redux or another global store, you must integrate a custom theme provider with React-Admin’s <Admin> component and sync it with your state logic.

Step‑by‑Step Guide

Implement a seamless light/dark theme toggle in your React-Admin app using MUI, Redux, and a custom UI control step by step.

Step 1: Define Your Themes

Create reusable MUI theme objects to represent the light and dark versions of your app.

// themes.jsimport { createTheme } from “@mui/material/styles”;

 

export const lightTheme = createTheme({

  palette: {

    mode: “light”,

    primary: { main: “#1976d2” },

  },

});

 

export const darkTheme = createTheme({

  palette: {

    mode: “dark”,

    primary: { main: “#90caf9” },

  },

});

Step 2: Add Theme Slice to Your Store

Create a slice to store and toggle the current theme mode (light or dark).

// themeSlice.js (Redux example)import { createSlice } from “@reduxjs/toolkit”;

 

const initialState = {

  mode: “light”, // or “dark”

};

 

const themeSlice = createSlice({

  name: “theme”,

  initialState,

  reducers: {

    toggleTheme: (state) => {

      state.mode = state.mode === “light” ? “dark” : “light”;

    },

  },

});

 

export const { toggleTheme } = themeSlice.actions;

export default themeSlice.reducer;

Step 3: Connect Admin to Store Theme

Fetch the current theme mode from the Redux store and pass the matching MUI theme to React-Admin.

// App.tsximport { Admin } from “react-admin”;

import { useSelector } from “react-redux”;

import { lightTheme, darkTheme } from “./themes”;

 

const App = () => {

  const themeMode = useSelector((state) => state.theme.mode);

  const theme = themeMode === “dark” ? darkTheme : lightTheme;

 

  return <Admin theme={theme} dataProvider={…} />;

};

 

export default App;

Also Read: How to Update ReactJS to the Latest Version Safely and Effectively

Step 4: Add a Theme Toggle UI

Create a UI control (e.g., icon button) that allows users to switch between light and dark themes by dispatching the toggle action.

// ThemeToggle.tsximport { useDispatch, useSelector } from “react-redux”;

import { toggleTheme } from “./themeSlice”;

import IconButton from “@mui/material/IconButton”;

import Brightness4Icon from “@mui/icons-material/Brightness4”;

 

const ThemeToggle = () => {

  const dispatch = useDispatch();

  const mode = useSelector((state) => state.theme.mode);

 

  return (

    <IconButton onClick={() => dispatch(toggleTheme())} color=”inherit”>

      <Brightness4Icon />

    </IconButton>

  );

};

 

export default ThemeToggle;

Step 5: Place Toggle Button in Layout

Insert the toggle button into your app bar, sidebar, or a persistent header so it’s accessible across views.

// Example: Inside custom AppBarimport { AppBar } from “react-admin”;

import ThemeToggle from “./ThemeToggle”;

const MyAppBar = (props) => (

  <AppBar {…props}>

    <ThemeToggle />

  </AppBar>

);