changing custom colors of a material-UI component to adjust dark mode

Question

hi I have a customised chip component for material-UI app where i am changing the background and border color of the chip by using the grey object

now when I am switching to dark mode via the global theme palette: { type: "dark" } those colors not changing. is there some way to change those custome colors based if we are in light or dark mode?

import React, { useState } from 'react';
import grey from'@material-ui/core/colors/grey';
import {Chip} from "@material-ui/core";
import {withStyles} from "@material-ui/core/styles";


const MyChip = withStyles(theme =>({
    root: {
         backgroundColor:grey[100],
         borderStyle: "solid",
         borderWidth: "1px",
         borderColor: grey[300]
    },
}))(Chip);

const ChipComponent = ({...props}) => {
    return <MyChip {...props} />
}

export default ChipComponent;

What does "switching to dark mode via the theme" mean specifically? The reason I ask is that I'm wondering if you can do something like: backgroundColor: theme.darkMode ? grey[800] : grey[100], — Ben Stephens
@BenStephens, thanks for the clarification, in my app i have a custom theme which is placed in a separate Theme.js file and is called from the app.js via the <ThemeProvider theme={theme}> in this global theme i have the ability to switch between dark and light modes via the palette with palette:{ type: "light", } it can be set to type: "dark", — winter sun
@BenStephens now when I am adding your suggestion to my custom chip component backgroundColor: theme.darkMode ? grey[800] : grey[100] it looks that it is not recognizing the darkMode (even if it is set un the Theme,js file since it applyes only the right argument grey[100] — winter sun
What about something like: backgroundColor: theme.palette.type === 'dark' ? grey[800] : grey[100] ? Hopefully it's just a matter of finding the correct property in theme to tell whether you're in dark mode or not. — Ben Stephens

winter sun winter sun · Accepted Answer · 2021-02-14T06:13:37

According to the solution of @BenStephens (see in the comments of the original question) the solution is to add theme.palette.type === 'dark' ? grey[800] : grey[100] to the background /border colors

import React, { useState } from 'react';
import {Chip} from "@material-ui/core";
import { createMuiTheme } from '@material-ui/core/styles';

import {withStyles} from "@material-ui/core/styles";
import { useTheme } from '@material-ui/core/styles';

import grey from'@material-ui/core/colors/grey';

const MyChip = withStyles(theme =>({
root: {
     backgroundColor:theme.palette.type=='dark'? grey["700"]:grey["100"],
     borderStyle: "solid",
     borderWidth: "1px",
     borderColor: theme.palette.grey[300]
},
}))(Chip);


const ChipComponent = ({...props}) => {
    return <MyChip {...props} />
}

export default ChipComponent;

changing custom colors of a material-UI component to adjust dark mode

1 Answers