The optimum way of changing Material UI react theme at runtime - reactjs

Question

I am new to React and Material UI and still am trying to grasp the composition over inheritance.
I am trying to achieve switching to dark/light theme at runtime in a react app. I have achieved it somehow but with lots of code duplication. I am sure there is a better way.
Here is what I have so far:
Theme.js
import { createMuiTheme } from "#material-ui/core/styles";
export const darkTheme = createMuiTheme({
palette: {
type: "dark",
},
//.....a lot of items
});
export const lightTheme = createMuiTheme({
palette: {
type: "light",
},
//.....duplicating same items as above
});
App.js
import { lightTheme, darkTheme } from "../shared/Theme";
const App = ({
theme
}) => {
return (
<ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
{/*Components...*/}
</ThemeProvider>
);
};
The theme props is getting injected using redux and its doing its job fine. This is workable solution but not the best one.
I found in Material UI documentation that we can have [outer and inner theme provider][1] and I tried doing the following (but it didn't work):
<ThemeProvider theme={…} >
<ThemeProvider theme={outerTheme => ({ darkMode: true, ...outerTheme })}>
{...Component}
</ThemeProvider>
</ThemeProvider>
I am aware of useStyle hook but it just lets you create class names that you can use in your component. What I want is: take a certain section of the existing theme object and replace a property in it.
Any help will is appreciated. Thanks for reading this far!
[1]: https://material-ui.com/styles/advanced/#main-content

Answer 1

"Duplication" is a problem when there is property-value repetition, otherwise is an alternate configuration, that is, repeating objects or their properties are not an issue. If there is no property-value repetition, using separate objects is the way, MUI does it, so you are right on track.
Now, Assuming you meant property-value repetition (shared styling) at:
//.....duplicating same items as above
where there is property-value repetition mixed with alternate configuration within your objects, and based on your goal:
take a certain section of the existing theme object and replace a property in it
Try a factory method:
const createThemeOptions = (isDarkMode)=>({
palette: {
mode: isDarkMode? "dark" : "light", // alternate configuration
},
primary: {
main: indigo['A700'], // property-value repetition(shared styling)
},
secondary: {
main: isDarkMode? deepOrange['A200'] : deepOrange['900'], // alternate configuration
},
// make your other object properties shared or alternate...
});
export const darkTheme = createMuiTheme(createThemeOptions(true));
export const lightTheme = createMuiTheme(createThemeOptions());