Chakra ui - color mode inside extendTheme

Question

我想根据活动主题颜色模式(深色或浅色)更改全局阴影颜色。所以如果主题是光，我想设置阴影。从xl到8px 8px 20px #fff，否则是8px 8px 20px #000。我了解功能，就像了解风格一样。全局的，但不可用于阴影或扩展主题。有任何想法如何发现哪个颜色模式是活跃的吗?

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

Answer 1

在查看chakra的默认主题源代码时，我发现了这个:https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/styles.ts你需要使用mode()，它是从@chakra-ui/theme-tools

导入的

Answer 2

虽然在extendTheme的文档中没有提到，但看起来extendTheme也可以接受函数作为参数。然后将此函数应用于默认主题，使您可以访问主题的所有属性。特别是，你可以检查theme.config.initialColorMode，并相应地设置阴影。它可能看起来像这样:

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