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:
App.js
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;
SmallComponent.js
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/
Publicación traducida automáticamente
Artículo escrito por chaudharinikita9999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA