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

Removing nested divs using JavaScript

What is the best way to integrate a CSS designed flag in my website's top navigation bar?

Run this command to troubleshoot errors in your React.js project

Alert: ER_NO_SUCH_TABLE: The table 'companyapp.prescription' is not found

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path

Executing Basic Calculations Instantly with Live Data in Qualtrics

Shifting the form to the bottom right corner

Guide on embedding a form component within an iframe using ReactJS

Make TextField automatically select all text when focused

const within a React component

Navigating a Bootstrap carousel with buttons: A step-by-step guide

Unable to serve as a JSX component. The return type 'void' is not a permissible JSX element

Mastering the utilization of React props within a Tailwind component

I am feeling lost when it comes to managing state/props and making changes to the user interface in

Using CSS units such as vw, vh, or percentage to specify height is not possible

Guide to utilizing Gatsby for showcasing a directory containing images and markdown files

SyntaxError: An invalid character was encountered (at file env.js, line 1, column 1)

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

A space designated for numerous receivers

Tips for customizing the `src/app/layout.tsx` file in Next.js 13