当我点击按钮时，我想将页面背景颜色更改为另一种颜色，而不是黑色，我该怎么做？

Question

const DarkTheme = () => {
  const [dark, setDark] = useState(false)

  const theme = createMuiTheme({
      palette: {
          type: dark ? 'dark' : 'light',`I want to make another color instead of dark`
      },
  })

当我点击按钮时，我想将页面背景颜色更改为另一种颜色，而不是黑色，我该怎么办？

  return (
      <ThemeProvider theme={theme}>
           //toggle
          <Switch checked={dark} onChange={() => setDark(!dark)} />
          <Paper>
              <Typography variant='h1'>This is a h1 text</Typography>

              <Typography variant='body2'>This is a body2 text</Typography>
          </Paper>
      </ThemeProvider>
  )
}

https://stackoverflow.com

Answer 1

您可以使用自定义palette 设计来创建自己的暗模式。

像这里一样，我为 暗模式 创建了 pink color 背景，在 l夜间模式 中创建了 blue text。

import {useState} from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { amber, pink,blue } from '@mui/material/colors';

import Paper from '@mui/material/Paper'
import Typography from '@mui/material/Typography'
import Switch from '@mui/material/Switch';



export default function Palette() {

  const [dark, setDark] = useState(false);
  const theme = createTheme({
    palette: {
      dark,
    primary: {
      ...amber,
      ...(dark === true && {
        main: amber[300],
      }),
    },
    ...(dark === true && {
      background: {
        default: pink[900],
        paper: pink[900],
      },
    }),
    text: {
      ...(dark === false
        ? {
            primary: blue[900],
            secondary: blue[800],
          }
        : {
            primary: '#fff',
            secondary: blue[500],
          }),
    },
    },
    });

  return (
    <ThemeProvider theme={theme}>
      
      <Switch checked={dark} onChange={() => setDark(!dark)} />
        <Paper>
          <Typography variant='h1'>This is a h1 text</Typography>

              <Typography variant='body2'>This is a body2 text</Typography>
          </Paper>
    </ThemeProvider>
  );
}