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

📌 相关文章

📜 如何使用 Material UI 在 ReactJS 中创建暗模式？(1)

📅 最后修改于: 2023-12-03 14:52:00.053000 🧑 作者: Mango

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

Material UI 是一个流行的 React UI 组件库，可以帮助开发人员快速创建美观且易于使用的 Web 应用程序。其中一个常见的需求是创建暗模式。

在本文中，我们将讨论如何使用 Material UI 在 ReactJS 中创建暗模式。我们将涵盖以下主题：

如何在 ReactJS 中安装 Material UI 库
如何使用 Material UI 中的颜色主题创建暗模式
如何通过切换主题实现暗模式和亮模式之间的转换

1. 安装 Material UI

要使用 Material UI，您需要在 React 项目中安装它。可以通过 npm 包管理器来安装 Material UI：

npm install @material-ui/core

安装完成后，您可以将 Material UI 组件导入到您的 React 代码中。

import React from 'react';
import { Button } from '@material-ui/core';

function App() {
  return (
    <Button variant="contained" color="primary">
      Click me!
    </Button>
  );
}

export default App;

2. 创建暗模式

要创建暗模式，我们需要使用 Material UI 中的颜色主题。颜色主题可以用来配置主题中使用的颜色。我们将使用颜色主题来定义我们的暗模式颜色。

首先，在您的 App.js 文件中创建一个实例化的 ThemeProvider，使用 createMuiTheme 函数创建 Material UI 颜色主题。

import React from 'react';
import {
  ThemeProvider,
  createMuiTheme,
  Button,
} from '@material-ui/core';

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Button variant="contained" color="primary">
        Click me!
      </Button>
    </ThemeProvider>
  );
}

export default App;

在上面的代码片段中，我们使用 createMuiTheme 函数创建了一个新的颜色主题。我们将在 palette 对象中指定颜色主题的类型为 dark。这将告诉 Material UI，我们想要使用暗色调的颜色。

现在，运行您的 React 应用程序，您应该可以看到它的主题已经更改为暗模式。

3. 切换主题

在许多应用程序中，您可能需要为用户提供切换暗模式和亮模式的选项。Material UI 使这变得容易。您可以通过 useTheme 钩子从当前 ThemeProvider 中获取当前主题，并通过更改 palette.type 来更改主题。

import React from 'react';
import {
  ThemeProvider,
  createMuiTheme,
  Button,
  useTheme,
} from '@material-ui/core';

function App() {
  const theme = useTheme();

  const toggleTheme = () => {
    const newPaletteType =
      theme.palette.type === 'light' ? 'dark' : 'light';

    localStorage.setItem('paletteType', newPaletteType);

    const updatedTheme = createMuiTheme({
      palette: {
        type: newPaletteType,
      },
    });

    document.body.style.backgroundColor =
      updatedTheme.palette.background.default;

    setTheme(updatedTheme);
  };

  const [theme, setTheme] = React.useState(() => {
    const paletteType = localStorage.getItem('paletteType');
    const preferredDarkMode = window.matchMedia(
      '(prefers-color-scheme: dark)'
    ).matches;

    if (paletteType) {
      return createMuiTheme({
        palette: {
          type: paletteType,
        },
      });
    } else {
      return createMuiTheme({
        palette: {
          type: preferredDarkMode ? 'dark' : 'light',
        },
      });
    }
  });

  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary" onClick={toggleTheme}>
        Toggle Theme
      </Button>
    </ThemeProvider>
  );
}

export default App;

在上面的代码片段中，我们创建了一个 toggleTheme 函数，该函数将在按钮单击时切换主题。该函数涉及到从存储中获取当前主题，一个名为 localStorage 对象已在浏览器中实现。如果没有在存储中找到主题，则我们将判断用户的首选暗模式并设置默认值。我们之后使用 createMuiTheme 函数创建新的主题，并将其应用于当前的 ThemeProvider 中。

现在我们完成了一个可以在 ReactJS 中创建暗模式的程序。我们讨论了如何安装 Material UI 库，如何使用颜色主题创建暗模式，以及如何通过切换主题实现暗模式和亮模式之间的转换。

注意：以下为markdown说明，请勿删除

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

本文将介绍如何在 ReactJS 中使用 Material UI 创建暗模式。我们将讨论如何在 ReactJS 应用程序中安装 Material UI 库，如何使用 Material UI 中的颜色主题创建暗模式，以及如何通过切换主题实现暗模式和亮模式之间的转换。

安装 Material UI

安装 Material UI 库，您需要在 ReactJS 项目中使用 npm 包管理器来安装它：

npm install @material-ui/core

安装完成后，您可以将 Material UI 组件导入到您的 React 代码中。

import React from 'react';
import { Button } from '@material-ui/core';

function App() {
  return (
    <Button variant="contained" color="primary">
      Click me!
    </Button>
  );
}

export default App;

创建暗模式

要创建暗模式，我们需要使用 Material UI 中的颜色主题。颜色主题可以用来配置主题中使用的颜色。我们将使用颜色主题来定义我们的暗模式颜色。

首先，在您的 App.js 文件中创建一个实例化的 ThemeProvider，使用 createMuiTheme 函数创建 Material UI 颜色主题。

import React from 'react';
import {
  ThemeProvider,
  createMuiTheme,
  Button,
} from '@material-ui/core';

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Button variant="contained" color="primary">
        Click me!
      </Button>
    </ThemeProvider>
  );
}

export default App;

现在，运行您的 ReactJS 应用程序，您应该可以看到它的主题已经更改为暗模式。

切换主题

import React from 'react';
import {
  ThemeProvider,
  createMuiTheme,
  Button,
  useTheme,
} from '@material-ui/core';

function App() {
  const theme = useTheme();

  const toggleTheme = () => {
    const newPaletteType =
      theme.palette.type === 'light' ? 'dark' : 'light';

    localStorage.setItem('paletteType', newPaletteType);

    const updatedTheme = createMuiTheme({
      palette: {
        type: newPaletteType,
      },
    });

    document.body.style.backgroundColor =
      updatedTheme.palette.background.default;

    setTheme(updatedTheme);
  };

  const [theme, setTheme] = React.useState(() => {
    const paletteType = localStorage.getItem('paletteType');
    const preferredDarkMode = window.matchMedia(
      '(prefers-color-scheme: dark)'
    ).matches;

    if (paletteType) {
      return createMuiTheme({
        palette: {
          type: paletteType,
        },
      });
    } else {
      return createMuiTheme({
        palette: {
          type: preferredDarkMode ? 'dark' : 'light',
        },
      });
    }
  });

  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary" onClick={toggleTheme}>
        Toggle Theme
      </Button>
    </ThemeProvider>
  );
}

export default App;