¿Cómo crear el modo oscuro en ReactJS usando Material UI?

Tener un modo oscuro en su sitio web o aplicación se ha vuelto muy popular hoy en día. En este artículo, aprenderá cómo agregar un interruptor de modo oscuro en su aplicación web React para alternar entre el modo claro y oscuro.

Paso para crear la aplicación React e instalar el módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando:

  cd foldername

 

• Paso 3: después de crear la aplicación React.js, instale los módulos de material-UI con el siguiente comando.

  npm install @material-ui/core
  npm install @material-ui/icons

Ejemplo: Después de crear una aplicación básica para reaccionar, haremos cambios en App. js de la siguiente manera:

Paso 1: importa ThemeProvider y crea MuiTheme

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

Paso 2: configure la lógica de alternancia en App.js

const [toggleDark, settoggleDark] = useState(false);
const myTheme=createMuiTheme({

    // Theme settings
    palette:{
      type: toggleDark ? 'dark' : 'light',
    }
});

Paso 3: Aquí estoy creando un nuevo SmallComponent que será nuestro nuevo componente importado en App. j (Puede personalizarlo para su propio componente. Aquí me estoy enfocando en implementar el modo oscuro en el código ya existente). Pase los estados para el modo oscuro (toggle dark y settoggleDark), que se usarán para cambiar entre el modo claro y oscuro. Envuelva su componente dentro de ThemeProvider y pase su tema personalizado.

<ThemeProvider theme={myTheme}>
    <SmallComponent toggleDark={toggleDark} settoggleDark={settoggleDark}/>
</ThemeProvider>

Paso 4: Activar alternar usando onChange Switch en SmallComponent.js

const handleModeChange = () => {
    settoggleDark(!toggleDark)
};

<Switch
    checked={toggleDark}
    onChange={handleModeChange}
    name="toggleDark"
    color="default"
/>

Ejemplo:

import React, { useState } from "react";
import SmallComponent from "./SmallComponent";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
  
function App() {
  const [toggleDark, settoggleDark] = useState(false);
  const myTheme = createMuiTheme({
    
    // Theme settings
    palette: {
      type: toggleDark ? "dark" : "light",
    },
  });
  
  return (
    
    // Wrapping code in ThemeProvider
    <ThemeProvider theme={myTheme}>
      <SmallComponent toggleDark={toggleDark}
      settoggleDark={settoggleDark} />
    </ThemeProvider>
  );
}
  
export default App;

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Avatar from "@material-ui/core/Avatar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import { red } from "@material-ui/core/colors";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import Grid from "@material-ui/core/Grid";
import MoreVertIcon from "@material-ui/icons/MoreVert";
  
// Import your profile image in images folder
import myImg from "./images/nikita-img.jpeg";
  
// Import your background image in images folder
import backImg2 from "./images/nik2.jpg"; 
import Switch from "@material-ui/core/Switch";
  
const useStyles = makeStyles((theme) => ({
  
  // Styling material components
  root: {
    width: "100%",
    height: "100vh",
    backgroundColor: theme.palette.background.default,
    [theme.breakpoints.down("xs")]: {
      paddingTop: theme.spacing(2),
    },
  },
  media: {
    height: 56,
    paddingTop: "56.25%", // 16:9
  },
  avatar: {
    backgroundColor: red[500],
  },
}));
  
export default function SmallComponent({ 
        toggleDark, settoggleDark }) {
  const classes = useStyles();
    
  // Trigger toggle using onChange Switch
  const handleModeChange = () => {
    settoggleDark(!toggleDark);
  };
  return (
    <Grid
      className={classes.root}
      container
      justify="center"
      alignItems="center"
    >
      <Card elevation={8}>
        {/* you can modify the image avatar,
         background and title name to yours*/}
        <CardHeader
          avatar={<Avatar alt="Nikita Chaudhari" src={myImg} />}
          action={
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          }
          title="Nikita Pradip Chaudhari"
          subheader="nikita12c"
        />
        <CardMedia
          className={classes.media}
          image={backImg2}
          title="Paella dish"
        />
        <CardContent>
          <Typography variant="body2" color="textSecondary" component="p">
            Geeks For Geeks : Dark Mode
          </Typography>
        </CardContent>
        <CardActions disableSpacing>
          <IconButton aria-label="add to favorites">
            <FavoriteIcon />
          </IconButton>
          <IconButton aria-label="share">
            <ShareIcon />
          </IconButton>
          {/* switching between dark and light mode */}
          <Switch
            checked={toggleDark}
            onChange={handleModeChange}
            name="toggleDark"
            color="default"
          />
        </CardActions>
      </Card>
    </Grid>
  );
}

Vea el video de demostración a continuación: 

Explicación: Material-UI viene con dos tipos de paletas; claro (predeterminado) y oscuro . Puede oscurecer el tema configurando el tipo: ‘oscuro’. Si desea tener más control sobre la combinación de colores, puede definirlos usted mismo o puede visitar https://material-ui.com/customization/color/#playground en el sitio web de Material-UI para elegir la combinación de colores deseada. 

Referencia: https://material-ui.com/customization/palette/