Chakra UI extendTheme中如何根据色模式切换全局shadow.xl阴影颜色

解决方案 #

Chakra UI 的 shadows 主题配置项本身不支持直接传入适配颜色模式的函数，你可以通过全局 CSS 变量实现需求，具体修改如下：

import { extendTheme, mode } from '@chakra-ui/react'

const theme = extendTheme({
  shadows: {
    // 引用后续定义的全局CSS变量
    xl: 'var(--shadow-xl)',
  },
  styles: {
    global: props => ({
      // 在全局根节点根据当前颜色模式赋值阴影变量
      ':root': {
        '--shadow-xl': mode('8px 8px 20px #fff', '8px 8px 20px #000')(props)
      },
      body: {
        color: mode(gray500, '#fff')(props),
        bg: mode(gray100, '#161616')(props),
        fontWeight: 300,
      },
    }),
  },
});

修改后所有用到shadow="xl"的组件都会自动跟随全局颜色模式切换阴影颜色，无需额外修改组件层代码。

内容的提问来源于stack exchange，提问作者quippe