Guide to adding a theme switcher feature to your current React website

Question

Guide to adding a theme switcher feature to your current React website

Currently, I am faced with a challenge involving two theme files, theme.js and theme-dark.js, within the context of a complex React-based website. Despite having already set up the site, I am struggling to find a way to allow users to seamlessly switch between these two themes using a switcher integrated into the website.

The following snippet showcases how my index.js render function is structured:

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

Moreover, this excerpt illustrates the relevant code present in the App.tsx file:

<ThemeProvider theme={theme}>
     <CssBaseline />
     <SnackbarProvider
          .....
     </SnackbarProvider>
</ThemeProvider>

Within the App.tsx file, the above code is nested within custom Context provider components responsible for loading the initial components of the site.

Despite providing the existing code snippets above, I have hit a roadblock when attempting to incorporate a functionality allowing the user to toggle between the theme.js and theme-dark.js themes. Any guidance or assistance that can be provided would be profoundly appreciated. Unfortunately, due to security protocols at my company, I am unable to share additional code. However, it appears that the main obstacle lies in the conflict arising when introducing a custom theme provider alongside the <Provider> element in index.js.

css reactjs material-ui themes

Answer 1

Answer №1

To efficiently handle the job, consider implementing a simple state that can be toggled deep within your application where the switch/button is located.

While passing through with Context is an option, leveraging Redux eliminates the need to reinvent the wheel.

Start by creating 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;
  }
}

Integrate it into your rootReducer:

// rootReducer.js
...
import isDarkModeReducer from '<location of your isDarkModeReducer reducer>';
...
const rootReducer = combineReducers({
  ...
  isDarkMode: isDarkModeReducer
})
...

In your App.tsx, retrieve the isDarkMode value from the store and apply it conditionally to load either theme.js or theme-dark.js:

// 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>
);
...

To enable toggling, simply dispatch the toggleDarkMode action from wherever your switch button is positioned:

// SwitchButton
import { useDispatch } from 'react-redux'

const dispatch = useDispatch();

const toggleTheme = () => {
  dispatch({ type: 'toggleDarkMode' });
};


return (
  <button onClick={toggleTheme}>Switch Theme</button>
);

If you wish to persist the value using localStorage, refer to the instructions provided in the official documentation.

Answer 2

To efficiently handle the job, consider implementing a simple state that can be toggled deep within your application where the switch/button is located.

While passing through with Context is an option, leveraging Redux eliminates the need to reinvent the wheel.

Start by creating 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;
  }
}

Integrate it into your rootReducer:

// rootReducer.js
...
import isDarkModeReducer from '<location of your isDarkModeReducer reducer>';
...
const rootReducer = combineReducers({
  ...
  isDarkMode: isDarkModeReducer
})
...

In your App.tsx, retrieve the isDarkMode value from the store and apply it conditionally to load either theme.js or theme-dark.js:

// 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>
);
...

To enable toggling, simply dispatch the toggleDarkMode action from wherever your switch button is positioned:

// SwitchButton
import { useDispatch } from 'react-redux'

const dispatch = useDispatch();

const toggleTheme = () => {
  dispatch({ type: 'toggleDarkMode' });
};


return (
  <button onClick={toggleTheme}>Switch Theme</button>
);

If you wish to persist the value using localStorage, refer to the instructions provided in the official documentation.

Guide to adding a theme switcher feature to your current React website

Answer №1

Similar questions

Warning issued by npm during compilation: The template string expression is unexpected as there should be no curly braces in the

The hover function stops working once the dropdown class has been removed

Dynamic Cursor Modification Upon Hovering Over Child Component

Utilizing getStaticProps for Performance Optimization in Next.js

Having Trouble Adding a CSS File to Your Django Project? Can't Seem to Get it

mapStateToProps was invoked, however componentDidUpdate did not trigger

Is the background image viewport centered?

Utilizing Media queries in Material UI makestyles for responsive design

What is the best way to retrieve data from app.post within react.js?

Highlighted option selection in Material UI dropdown using Cypress

Slide the next section over the current section using full-page JavaScript

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

How can we enforce that only a certain type of ReactElement is allowed to be passed as props to a Component in TypeScript?

Generate a user with unique UUID identifier and an array of nested objects

CSS: Creating a block that stretches the entire width of its parent block

Issue with ReactTS Route Triggering Invalid Hook Call

Placing text alongside an image at the top of the page

Retrieve all references to child elements in React

Do we need to invoke the unmount function after every test case in React testing library?

What are the benefits of incorporating CSS into a CSS block rather than utilizing inline output with HtmlHelper in CakePHP?