CODEWITHSUNDEEP
javascriptreactjstypescriptchakra-ui
quippe
quippe

Reputation: 373

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,
      },
    }),
  },
});

Upvotes: 0

Views: 2687

Answers (2)

Ayoub Kharbouch
Ayoub Kharbouch

Reputation: 81

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

Upvotes: 3

William Lewis
William Lewis

Reputation: 589

Although it's not mentioned in the docs on extendTheme, it looks like extendTheme can also accept a function as an argument. This function is then applied to the default theme, giving you access to all of the theme's properties. In particular, you can check theme.config.initialColorMode, and set your shadows accordingly. That might look something like this:

const theme = extendTheme(currentTheme => {
  const isLight = currentTheme.config.initialColorMode === 'light';
  return {
    shadows: {
      xl: isLight ? '8px 8px 20px #fff' : '8px 8px 20px #000',
    },
    styles: {
      global: props => ({
        body: {
          color: mode(gray500, '#fff')(props),
          bg: mode(gray100, '#161616')(props),
          fontWeight: 300,
        },
      }),
    },
  };
});

Upvotes: 0

Related Questions