How to implement a theme switcher on an existing React site - css

Question

I currently have two theme files, theme.js and theme-dark.js. I also have a complex React-based site that has already been set up, and I cannot find a way to implement a way for a user to switch between the two theme files via some switcher on the site.
This is what my index.js render function looks like:
const rootElement = document.getElementById('root')
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
)
And this is what the relevant code in the App.tsx file looks like:
<ThemeProvider theme={theme}>
<CssBaseline />
<SnackbarProvider
.....
</SnackbarProvider>
</ThemeProvider>
The above code from the App.tsx file is nested in some custom Context provider components and contains some data for loading the initial components of the site.
I'm having some trouble implementing a theme switcher with this existing code to switch between theme.js and theme-dark.js. If anyone could give me a push in the right direction I'd greatly appreciate it. Unfortunately this is about all the actual code I can paste due to security reasons for my company, but I believe the main issue here is that the <Provider> element in index.js breaks when a custom theme provider is provided.

Answer 1

A simple state should suffice the job, but you might need to toggle the state deep down your app, where the switch/button is.
You can pass through with Context, but since you're using redux already, why reinvent the wheel.
Create a reducer for your theme type,
// isDarkModeReducer.js
export default function isDarkModeReducer(state = false, action) {
switch (action.type) {
case 'toggleDarkMode': {
return !state;
}
default:
return state;
}
}
Add it on your rootReducer
// rootReducer.js
...
import isDarkModeReducer from '<location of your isDarkModeReducer reducer>';
...
const rootReducer = combineReducers({
...
isDarkMode: isDarkModeReducer
})
...
On your App.tsx access the isDarkMode value from the created store, and use it to conditionally pass theme.js or theme-dark.js file.
// App.tsx
...
import theme from 'theme.js';
import theme-dark from 'theme-dark.js';
import { useSelector } from 'react-redux'
const isDarkMode = useSelector(state => state.isDarkMode);
...
return (
<ThemeProvider theme={isDarkMode ? theme-dark : theme}>
<CssBaseline />
<SnackbarProvider
.....
</SnackbarProvider>
</ThemeProvider>
);
...
For toggling, all you have to do is dispatch the action toggleDarkMode from wherever your switch button is.
// SwitchButton
import { useDispatch } from 'react-redux'
const dispatch = useDispatch();
const toggleTheme = () => {
dispatch({ type: 'toggleDarkMode' });
};
return (
<button onClick={toggleTheme}>Switch Theme</button>
);
You might also want to save the value to localStorage for persisting, which you can easily do as stated in the docs.