Implementation of Dark Mode in React using Redux Toolkit
Last Updated :
28 Apr, 2025
In this article we are going to implement Dark and Light mode toggle button using React JS and Redux Toolkit. Dark Mode is also known as night mode. It is just a dark theme where mostly background colors will turn into dark and text color will turn into light.
Preview of final output: Let us have a look at how the final output will look like.

Prerequisites
Approach
Steps to implement this functionality are given below -
- Create three folders pages, reducer, slices in src directory and create Home.jsx, index.js, modeSlice in it respectively.
- Implement store inside Index.js code in the following example.
- Implement reducer in modeSlice file required code is provided in the example.
- Implement combineReducer in Index.js file present in reducer directory required code is given in the example.
- Now we will create a page (Home.jsx) where we will make two icons and toggle background color.
- Last step call Home component in App.js file.
Steps to Create & Configure React App with Redux Toolkit
Step 1: Create a react app using command "npx create-react-app app-name".
npx create-react-app app-name
Step 2 : Install redux and redux toolkit using following commands
npm install react-redux @reduxjs/toolkit
Step 3: Add Tailwind CSS using CDN link given below in your index.html file.
<script src="https://cdn.tailwindcss.com"></script>
The updated Dependencies in package.json file will look like:
"dependencies": {
"@reduxjs/toolkit": "^1.9.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.12.0",
"react-redux": "^8.1.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Project Structure:
directory structure Example: It contains implementation of above steps.
JavaScript
// Index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
// Redux
import { Provider } from "react-redux";
import rootReducer from "./reducer/index.js";
import { configureStore } from "@reduxjs/toolkit"
const store = configureStore({
reducer: rootReducer,
})
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
JavaScript
// modeSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
darkMode: localStorage.getItem("darkMode")
? JSON.parse(localStorage.getItem("darkMode")) : false
}
const modeSlice = createSlice({
name: "mode",
initialState: initialState,
reducers: {
setMode(state, value) {
state.darkMode = value.payload
localStorage.setItem('darkMode', JSON.stringify(state.darkMode));
}}})
export const { setMode } = modeSlice.actions;
export default modeSlice.reducer;
JavaScript
// reducer/index
import { combineReducers } from "@reduxjs/toolkit";
import modeReducer from "../slices/modeSlice"
const rootReducer = combineReducers({
mode: modeReducer
})
export default rootReducer
JavaScript
// Home.jsx
import React from "react";
import { useDispatch , useSelector } from "react-redux";
import { MdOutlineDarkMode } from "react-icons/md";
import { MdOutlineLightMode } from "react-icons/md";
import { setMode } from "../slices/modeSlice";
const Home = () => {
const dispatch = useDispatch();
const { darkMode } = useSelector(
(state) => state.mode
);
return (
<div>
<section className={`h-screen
flex
items-center
justify-center
text-2xl
cursor-pointer
${darkMode?
"text-richblack-100 "
: "text-richblack-700"}`}
onClick={() => {dispatch(setMode(!darkMode)
)}}>
{darkMode ? (
<MdOutlineLightMode size={"100px"}/>
) : (
<MdOutlineDarkMode size={"100px"}/>)}
</section>
</div>
);
};
export default Home;
JavaScript
// App.js
import Home from "./pages/Home";
import { useSelector } from "react-redux";
function App() {
const { darkMode } = useSelector((state) => state.mode);
return (
<div className={`transition-all
duration-500
ease-in-out
${darkMode ?
"bg-black " :
"bg-white"}`}>
<Home />
</div>
)}
export default App;
Steps to Run the Application:
Step 1: Type following command in your terminal.
npm start
Step 2: Locate the given URL in your browser.
http://localhost:3000/
Output
output
Similar Reads
Implementing Add to Cart functionality using Redux toolkit in React Add To Cart functionality is one of the important components of the E-commerce platform. In this article, we are going to learn how to implement Add to Cart functionality using React JS and Redux Toolkit. Preview of final output: Let us have a look at how the final output will look like.Prerequisite
5 min read
Implementing React Router with Redux in React This article explores implementing React Router with Redux for enhanced state management and routing in React applications. Table of Content What is React Router and Redux?Approach to implement React Router in ReduxSteps to Setup the React AppWhat is React Router and Redux?React Router facilitates r
3 min read
Wishlist Functionality using Redux Toolkit in React Wishlist is one of the important concepts of an E-commerce platform. In this article, we are going to learn how to implement Wishlist functionality using React JS and Redux Toolkit. Preview of final output: Let us have a look at how the final output will look like.Prerequisites React JS React ReduxR
6 min read
Create a To-Do List App using React Redux A To-Do list allows users to manage their tasks by adding, removing, and toggling the completion status for each added item. It emphasizes a clean architecture, with Redux state management and React interface rendering. Todo AppPrerequisites Node.jsReactReact-ReduxApproachCreate a new React project
3 min read
Create a Simple Form Application using React Redux In this article, we make a simple project of form application built using React and Redux. The main purpose of the application is to collect user information through a form consisting of fields for name, email, message and submit button. It's built with React for the user interface and Redux for man
3 min read
How to connect the components using Connect() in React Redux In React Redux, you use the connect() function to connect your components to the Redux store. This function takes two parameters: mapStateToProps and mapDispatchToProps. mapStateToProps maps the store's state to the component's props, while mapDispatchToProps maps dispatch actions to props. By using
3 min read