Chakra ui - extendTheme中的颜色模式
Chakra ui - extendTheme中的颜色模式
提问于 2021-08-31 13:23:30
我想更改基于活动主题颜色模式(暗或亮)的全局阴影颜色。所以如果主题是轻的，我想设置shadow.xl为8px 8px 20px #fff，否则设置为8px 8px 20px #000。我知道像styles.global这样的函数，但它在shadows或extendTheme上不可用。有没有办法识别哪种颜色模式是激活的？
extendTheme({
shadows: {
// Here
xl: '8px 8px 20px #000',
},
styles: {
global: props => ({
body: {
color: mode(gray500, '#fff')(props),
bg: mode(gray100, '#161616')(props),
fontWeight: 300,
},
}),
},
});回答 1
Stack Overflow用户
发布于 2021-08-31 14:18:32
虽然在extendTheme的文档中没有提到它，但它looks like 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,
},
}),
},
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68999525
复制相关文章
相似问题
腾讯云开发者
