reactjs 如何在材质界面中设置暗模式的自定义基色

a1o7rhls  于 2022-12-12  发布在  React
关注(0)|答案(2)|浏览(152)

我有一个黑暗的主题应用程序,其中黑暗的颜色是#262626。我已经设置了palette模式为黑暗,也设置了主要的主要值以上十六进制黑暗的颜色,但它仍然没有显示我默认的材料用户界面黑暗的主题颜色。

const theme = createTheme({
  palette: {
    mode:'dark',
    primary: {
      main: "#262626",
      light: "#FFFFFF",
      dark: "#000000",
    },
    secondary: {
      main: "#323232"
    },
  }
});

我在这里做错了什么?我想我为lightdark属性设置了错误的值。有人知道实际的问题是什么吗?
我正在使用材质UI 5.10.16

nue99wik

nue99wik1#

要在Material-UI中为暗色模式设置自定义的主颜色,可以使用MuiThemeProvider组件创建自定义主题并覆盖默认的palette.primary颜色。

import React from 'react'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'

const theme = createMuiTheme({
  palette: {
    type: 'dark', // Set the theme to dark mode
    primary: {
      main: '#e91e63' // Set the primary color to pink
    }
  }
})

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      {/* Add your Material-UI components here */}
    </MuiThemeProvider>
  )
}

我希望这对你有帮助!

yh2wf1be

yh2wf1be2#

根据MUI document
若要使用浅色和深色模式的自定义调色板,可以创建一个函数,该函数将根据所选模式返回正确的调色板。
这里是一个非常基本的例子,从一个自定义的dark调色板和点击切换模式开始。但是要获得关于这方面的完整指南,包括使用上下文来共享切换和启用系统首选项,请查看MUI文档中的主题。
示例:(现场演示:(stackblitz

import React from 'react';
import Box from '@mui/material/Box';
import { pink, teal, grey } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const getDesignTokens = (mode) => ({
  palette: {
    mode,
    ...(mode === 'light'
      ? {
          // 👇 palette values for light mode
          primary: { main: pink[100] },
          text: {
            primary: grey[900],
          },
        }
      : {
          // 👇 palette values for dark mode
          primary: { main: teal[700] },
          text: {
            primary: '#fff',
          },
        }),
  },
});

export default function App() {
  const [mode, setMode] = React.useState('dark');
  const toggleColorMode = () => {
    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
  };

  const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]);

  return (
    <ThemeProvider theme={theme}>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          bgcolor: 'primary.main',
          color: 'text.primary',
          borderRadius: 1,
          p: 3,
          cursor: 'pointer',
        }}
        onClick={toggleColorMode}
      >
        {`Click to change to ${mode === 'dark' ? 'light' : 'dark'}`}
      </Box>
    </ThemeProvider>
  );
}

希望能起到一定的参考作用。

相关问题