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

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>
);
}