javascript - Material-UI - How to change default color for dark theme? - Stack Overflow

admin管理员组

文章数量:1310420

In Material-UI when changing the theme to dark, some ponents turn its color to #424242 and some other to #212121.

It seems those colors e 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, ponents 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:

CodeSandbox

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 with MuiThemeProvider:

ReactDOM.render(
  <MuiThemeProvider theme={themeX}>
    <Demo />
  </MuiThemeProvider>,
  document.querySelector("#root")
);

In Material-UI when changing the theme to dark, some ponents turn its color to #424242 and some other to #212121.

It seems those colors e 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, ponents 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:

CodeSandbox

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 with MuiThemeProvider:

ReactDOM.render(
  <MuiThemeProvider theme={themeX}>
    <Demo />
  </MuiThemeProvider>,
  document.querySelector("#root")
);

• javascript
• reactjs
• themes
• material-ui

Share Improve this question Follow edited Aug 5, 2019 at 19:53 Bens asked Aug 5, 2019 at 18:35 BensBens 95644 gold badges1212 silver badges3131 bronze badges 4

• Please indicate where this color is occurring and show the code involved in rendering that portion of the page. Also helpful to include a CodeSandbox demonstrating the color you want to change. – Ryan Cogswell Commented Aug 5, 2019 at 18:40
• I just added CodeSandbox example – Bens Commented Aug 5, 2019 at 19:53
• You still haven't indicated which element you are trying to affect the color of. – Ryan Cogswell Commented Aug 5, 2019 at 19:58
• The SwipeableViews backgroundColor which use #424242 color – Bens Commented Aug 5, 2019 at 20:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptMaterialUIHow to change default color for dark themeStack Overflow