Material-UI - How to change default color for dark theme?
In demo.js
is the following code:
const useStyles = makeStyles(theme => ({
root: {
backgroundColor: theme.palette.background.paper,
width: 500,
},
}));
This is controlling the background color for the div
that wraps the entire content. In order to control this, you need to either specify a different color directly in the makeStyles
call or you need to customize theme.palette.background.paper
. For instance:
const themeX = createMuiTheme({
palette: {
type: "dark",
grey: {
800: "#000000", // overrides failed
900: "#121212" // overrides success
},
background: {
paper: "#000000"
}
}
});
Bens
Updated on June 11, 2022Comments
-
Bens almost 2 years
In Material-UI when changing the theme to dark, some components turn its color to
#424242
and some other to#212121
.It seems those colors come from
theme.palette.grey
:theme.palette.grey[800]: '#424242' theme.palette.grey[900]: '#212121'
What if I want to use the color of
#121212
instead of#212121
?I did this:
const theme = createMuiTheme({ palette: { grey: { 900: '#121212' }, }, }); const App = () => { return ( <MuiThemeProvider theme={theme}> <MyComponent/> </MuiThemeProvider> ); }
And it works, components that used
#212121
now it using#121212
as its color.But it's not the case for
#424242
color, somehow I couldn't override it using the same trick.How can I change the use of color
#424242
with other color (e.g#000000
) in dark mode.EDIT:
from official docs code in index.js I just add this:
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles"; const themeX = createMuiTheme({ palette: { type: "dark", grey: { 800: "#000000", // overrides failed 900: "#121212" // overrides success } } });
And wrap
Demo
withMuiThemeProvider
:ReactDOM.render( <MuiThemeProvider theme={themeX}> <Demo /> </MuiThemeProvider>, document.querySelector("#root") );