How to Create Dark/Light Theme in Bootstrap with React?

Creating dark/light themes and integrating them into a React application enhances user experience by providing visual customization options, improving readability, and allowing users to switch between themes based on their preferences. In this article, we will learn to create dark/light theme in Bootstrap 5 with React.

Steps to Create the React Application

Step 1: Create React Project

npx create-react-app theme

Step 2: Navigate to the project directory

cd theme

Step 3: Installing required modules

npm install react-bootstrap bootstrap

Project Structure:

👁 PS

The updated dependencies in package.json file will look like:

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "bootstrap": "^5.3.3",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-bootstrap": "^2.10.2",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Using Bootstrap's built-in dark mode

• In this approach, we are using Bootstrap's built-in dark mode by toggling a state (isDarkMode) to switch between light and dark themes.
• The container's background and text color classes (bg-dark, text-light for dark mode, and bg-light for light mode) are dynamically applied based on the state.
• The toggleDarkMode function switches the theme when the toggle button is clicked.

Example: Implementation of the above approach.

Output:

👁 Bootstrap built-in dark theme in react

Using Bootstrap's Theme Classes

• In this approach, we are using Bootstrap's theme classes to toggle between dark and light themes in React.
• By dynamically adding the "theme-dark" or "theme-light" class to the main container, we control the overall theme appearance.
• Additionally, we utilize the data-bs-theme attribute on the HTML element to apply Bootstrap's built-in dark mode feature for a consistent styling experience.

Example: Implementation of the above approach.

Output:

👁 dark and light theme in bootstrap with react