Switching between dark/light style overrides

I want to override the color of some icons based on theme.type to a native PaletteColor. I can check the type and conditionally set the color like this:

const useStyles = makeStyles((theme: Theme) =>    createStyles({      someIcon: {        color:          theme.palette.type === "dark"            ? theme.palette.warning.dark            : theme.palette.warning.light,      },    })  );  

This is pretty verbose every time I want to override something though, so it can be refactored to themeColor below:

const themeColor = (theme: Theme, color: PaletteColor) =>    theme.palette.type === "dark"      ? color.dark      : color.light;    const useStyles = makeStyles((theme: Theme) =>    createStyles({      someIcon: {        color: themeColor(theme, theme.palette.warning)      },    })  );  

Which now makes me think, does Material-UI have some native helper that already does this?

https://stackoverflow.com/questions/66837800/switching-between-dark-light-style-overrides March 28, 2021 at 10:05AM