Pass the current color mode to functions used in `sx`

[benface]

Is your feature request related to a problem? Please describe. I wouldn’t say it’s a problem, but something that could be improved.

Describe the solution you'd like I would like to be able to do this:

<div
  sx={{
    boxShadow: (theme, colorMode) => colorMode === 'dark' ? `0px 0px 20px ${theme.colors.Shadow}` : `0px 0px 40px ${theme.colors.Shadow}`
  }}
/>

Describe alternatives you've considered I know I can get the current color mode with the useThemeUI hook, but the above is terser and nicer in some cases. For instance, if I want to extract the function above for reuse, it would be easy to do:

<div
  sx={{
    boxShadow: BoxShadow.M,
  }}
/>

vs what I have to do at the moment:

const { colorMode } = useThemeUI()

<div
  sx={{
    boxShadow: getBoxShadow(BoxShadow.M, colorMode),
  }}
/>

Additional context I am not sure if it’s possible/easy to add a second argument to the function. Perhaps instead it could be added as a property on the theme?

Thank you very much for your consideration!

[lachlanjc]

Note that we also have a simpler useColorMode() hook, but agree this would be nice to have too!

[lachlanjc]

@hasparus I'm not sure if this is possible with how our packages are set up; since color-modes is an optional package, how would we override this line if that context exists?

[hasparus]

Aren't all functions dependent on colors unsafe in SSR?