title: Switching between dark/light style overrides
body: <p>I want to override the color of some icons based on <code>theme.type</code> to a native <code>PaletteColor</code>. I can check the <code>type</code> and conditionally set the color like this:</p>
  <pre class="lang-js prettyprint-override"><code>const useStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      someIcon: {
        color:
          theme.palette.type === &quot;dark&quot;
            ? theme.palette.warning.dark
            : theme.palette.warning.light,
      },
    })
  );
  </code></pre>
  <p>This is pretty verbose every time I want to override something though, so it can be refactored to <code>themeColor</code> below:</p>
  <pre class="lang-js prettyprint-override"><code>const themeColor = (theme: Theme, color: PaletteColor) =&gt;
    theme.palette.type === &quot;dark&quot;
      ? color.dark
      : color.light;
  
  const useStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      someIcon: {
        color: themeColor(theme, theme.palette.warning)
      },
    })
  );
  </code></pre>
  <p>Which now makes me think, does Material-UI have some native helper that already does this?</p>