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