This React code implements a dark-mode
feature. Here's how it works:
light-mode:
dark-mode:
1. app.js:
- The App component initializes the application.
- It uses the
useState
hook to manage the theme state(theme)
with an initial value of'light-theme'
. - The
toggleTheme
function toggles between'light-theme'
and'dark-theme'
based on the current theme. - The
useEffect
hook is used to apply the selected theme to thedocument.body.className
whenever the theme changes. - It renders the Header component passing theme and
toggleTheme
asprops
.
//app.js
import React, { useEffect, useState } from 'react';
function App() {
const [theme, setTheme] = useState('light-theme');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'light-theme' ? 'dark-theme' : 'light-theme'));
};
useEffect(() =>{
document.body.className = theme;
}, [theme]);
return (
<>
<Header theme={theme} toggleTheme={toggleTheme}/>
</>
);
}
2. header.js:
The Header component represents the header section
of the application.
- It contains a clickable element (e.g., a span) that triggers the
toggleTheme
function
whenclicked
. - Depending on the current theme, it displays either a
dark-mode
icon(MdDarkMode)
or a light mode icon(MdLightMode)
.
//header.js
{/*=================== light mode function ============================== */}
<div className='light_mode'>
<span onClick = {toggleTheme}>
{theme === "light-theme" ? (
<span>
<MdDarkMode />
</span>
) : (
<span>
<MdLightMode />
</span>
)}
</span>
</div>
3. app.css:
The CSS file defines styles for the dark-theme
.
It uses CSS custom properties (--title-color, --title-color-dark, --text-color, --body-color, and --container-color)
to define various colors used in the dark-theme
.
//app.css
.dark-theme {
--title-color: hsl(var(--hue), var(--set), 20%);
--title-color-dark: #fcfbfb;
--text-color: #dad5d5;
--body-color: #030303;
--container-color: hsl(0, 1%, 23%);
}
Explanation:
Initially, the application starts with the default 'light-theme'
.
Clicking on the clickable element in the header triggers the toggleTheme
function
.
This function toggles
the theme between 'light-theme'
and 'dark-theme'
.
Upon theme change, the useEffect
hook updates the document.body.className
, applying the appropriate CSS
styles from app.css
.
In the CSS
file, the dark-theme
styles are defined using custom properties for colors, allowing easy customization and maintainability.
This implementation allows users to toggle between light
and dark
themes
by clicking on an icon in the header
, providing a visually customizable experience for the application.
Array methods in react.js
Fragment in react.js
Conditional rendering in react.js
Children component in react.js
use of Async/Await in react.js
Array methods in react.js
JSX in react.js
Event Handling in react.js
Arrow function in react.js
Virtual DOM in react.js
React map() in react.js
How to create dark mode in react.js
How to use of Props in react.js
Class component and Functional component
How to use of Router in react.js
All React hooks explain
CSS box model
How to make portfolio nav-bar in react.js
Top comments (0)