How to create dark-mode in React-js

#webdev #programming #javascript #beginners

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 the document.body.className whenever the theme changes.
It renders the Header component passing theme and toggleTheme as props.

//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).

//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.