Search code examples
javascriptreactjstypescriptchakra-ui

Chakra ui - color mode inside extendTheme


I want to change global shadow color based on active theme color mode (dark or light). So if theme is light I want to set shadow.xl to 8px 8px 20px #fff otherwise 8px 8px 20px #000. I know about function like in styles.global but it is not available on shadows or extendTheme. Any ideas how to spot which color mode is active?

extendTheme({
  shadows: {
    // Here
    xl: '8px 8px 20px #000',
  },
  styles: {
    global: props => ({
      body: {
        color: mode(gray500, '#fff')(props),
        bg: mode(gray100, '#161616')(props),
        fontWeight: 300,
      },
    }),
  },
});

Solution

  • While looking through chakra's default theme source code, I found this: https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts you need to use mode() which is imported from @chakra-ui/theme-tools