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.
Table of Content
- Using Bootstrap’s built-in dark mode
- Using Bootstrap’s Theme Classes
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:
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.
// Filename - App.js
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Button } from 'react-bootstrap';
function App() {
const [isDarkMode, setIsDarkMode] = useState(false);
const toggleDarkMode = () => {
setIsDarkMode((prevMode) => !prevMode);
};
return (
<>
<h1 className="text-center mb-5">
Using Bootstrap's built-in dark mode
</h1>
<Container
className={`d-flex flex-column justify-content-center
align-items-center ${isDarkMode ?
'bg-dark text-light' : 'bg-light'}`}
style={{ minHeight: '70vh' }}
>
<h1>{isDarkMode ? 'Dark Theme' : 'Light Theme'}</h1>
<Button variant="primary" onClick={toggleDarkMode}>
Toggle Theme
</Button>
</Container>
</>
);
}
export default App;
Output:
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.
// Filename - App.js
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Button } from 'react-bootstrap';
const App = () => {
const [darkMode, setDarkMode] = useState(false);
const toggleTheme = () => {
setDarkMode(!darkMode);
const htmlElement = document.querySelector('html');
htmlElement.setAttribute('data-bs-theme',
darkMode ? 'dark' : 'light');
};
return (
<div className={`App ${darkMode ? 'theme-dark' : 'theme-light'}`}>
<Container className="py-4">
<h1>Using Bootstrap's Theme Classes</h1>
<p>Hello w3wiki</p>
<Button variant="primary" onClick={toggleTheme}>
{darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
</Button>
</Container>
</div>
);
};
export default App;
Output:
Contact Us