如何使用 Material UI 在 ReactJS 中创建暗模式？

如今，在您的网站或应用程序上设置暗模式已变得非常流行。在本文中，您将学习如何在 React Web 应用程序中添加暗模式开关，以在亮模式和暗模式之间切换。

创建 React 应用程序和安装模块的步骤：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

• 第 3 步：创建 React.js 应用程序后，使用以下命令安装 material-UI 模块。

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

示例：创建一个基本的 React 应用程序后，我们将在 App 中进行更改。 js如下：

第一步：导入 ThemeProvider 并创建MuiTheme

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

第 2 步：在 App.js 中设置切换逻辑

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

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

第 3 步：在这里我创建了一个新的 SmallComponent，它将是我们在 App 中导入的新组件。 j （您可以将其自定义为您自己的组件。这里我重点介绍在现有代码中实现暗模式）。传递暗模式的状态（toggle dark 和 settoggleDark），这将用于在亮模式和暗模式之间切换。在 ThemeProvider 中包装您的组件并传递您自定义的主题。

第 4 步：在 SmallComponent.js 中使用 onChange Switch 触发切换

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

 

例子：

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
    
      
    
  );
}
  
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 (
    
      
        {/* you can modify the image avatar,
         background and title name to yours*/}
        }
          action={
            
              
            
          }
          title="Nikita Pradip Chaudhari"
          subheader="nikita12c"
        />
        
        
          
            Geeks For Geeks : Dark Mode
          
        
        
          
            
          
          
            
          
          {/* switching between dark and light mode */}
          
        
      
    
  );
}

请参阅下面的演示视频：

说明： Material-UI 自带两种调色板类型；浅色（默认）和深色。您可以通过设置类型使主题变暗：'dark'。如果您想要更多地控制配色方案，您可以自己定义它们，或者您可以访问 Material-UI 网站上的 https://material-ui.com/customization/color/#playground 以选择您想要的配色方案。

参考： https ://material-ui.com/customization/palette/