How to create dark-mode in React-js
Tags: webdev, javascript, programming, beginners
Published: 2024-03-18 03:39:12

This React code implements a `dark-mode` feature. Here's how it works:
##light-mode:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ef0jfqloh7d5d1t31t7q.png)
##dark-mode:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcesiree43m1jeyyguez.png)

##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 the `document.body.className` whenever the theme changes.
- It renders the Header component passing theme and `toggleTheme` as `props`.
```js
//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` when `clicked`.
- Depending on the current theme, it displays either a `dark-mode` icon `(MdDarkMode)` or a light mode icon `(MdLightMode)`.
```js
//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`.
```css
//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.

[github](https://github.com/04anilr)
[website](https://my-portfolio-two-lemon-36.vercel.app/)


[Array methods in react.js ](https://dev.to/04anilr/how-to-use-array-methods-in-real-project-example-add-new-record-3o82)
[Fragment in react.js](https://dev.to/04anilr/fragment-in-reactjs-example-of-fragment-299a) 
[Conditional rendering in react.js](https://dev.to/04anilr/conditional-rendering-in-react-conditional-rendering-example-in-react-3j46)
[Children component in react.js](https://dev.to/04anilr/methods-of-react-children-component-in-react-4ol7)
[use of Async/Await in react.js](https://dev.to/04anilr/how-to-use-asyncawait-3a3o)
[Array methods in react.js](https://dev.to/04anilr/array-methods-in-reactjs-36jb)
[JSX in react.js](https://dev.to/04anilr/jsx-in-reactjs-3f7o)
[Event Handling in react.js](https://dev.to/04anilr/event-handling-in-react-5hc7)
[Arrow function in react.js](https://dev.to/04anilr/arrow-functions-in-react-4gb2)
[Virtual DOM in react.js](https://dev.to/04anilr/how-to-work-virtual-dom-in-react-dom-1b39)
[React map() in react.js](https://dev.to/04anilr/how-to-create-react-map-24pp)
[How to create dark mode in react.js](https://dev.to/04anilr/how-to-create-dark-mode-in-react-js-2kn2)
[How to use of Props in react.js](https://dev.to/04anilr/props-and-state-with-example-1bl1)
[Class component and Functional component](https://dev.to/04anilr/class-component-functional-component-in-react-k43)
[How to use of Router in react.js](https://dev.to/04anilr/how-to-use-of-router-in-reactreact-router-1163)
[All React hooks explain ](https://dev.to/04anilr/react-hooks-cheat-sheet-2hic)
[CSS box model ](https://dev.to/04anilr/css-box-model-work-2k0a)
[How to make portfolio nav-bar in react.js](https://dev.to/04anilr/how-to-make-nav-bar-for-portfolio-website-365m)