How to set custom primary color for dark mode in Material UI-CodePudding

I have a dark theme application in which dark color is #262626. I have set the palette mode to dark and also set primary main value to above hex dark color, but still it's not showing me default material UI dark theme color.

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

What wrong am I doing here? I guess I am setting the wrong values for the light and dark properties. Does anyone know what the actual problem is?

I am using Material UI 5.10.16.

CodePudding user response：

To set a custom primary color for dark mode in Material-UI, you can use the MuiThemeProvider component to create a custom theme and override the default palette.primary color. Here is a very simple example for reference

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

I hope this helps!

CodePudding user response：

According to MUI document:

To use custom palettes for light and dark modes, you can create a function that will return the correct palette depending on the selected mode.

Here is a very basic example that starts with a custom dark color palette and toggle modes on click. But for a full guide on this, including use of context to share the toggle and enable system preference, check the MUI document on the subject.

Example: (live demo on: 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'
      ? {
          //