Chakra ui -extendTheme 内的颜色模式答案

【问题标题】：Chakra ui - color mode inside extendThemeChakra ui -extendTheme 内的颜色模式
【发布时间】：2021-10-30 02:46:25
【问题描述】：

我想根据活动主题颜色模式（深色或浅色）更改全局阴影颜色。因此，如果主题很轻，我想将 shadow.xl 设置为8px 8px 20px #fff，否则设置为8px 8px 20px #000。我知道styles.global 中的函数，但它在阴影或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,
      },
    }),
  },
});

【问题讨论】：

标签： javascript reactjs typescript chakra-ui

【解决方案1】：

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

【讨论】：

更改主题时它不起作用。 InitialColorMode 是一个静态值。
啊！我知道了。我怀疑这可能与extendTheme 无关，因为“主题”对象似乎是静态的（尽管我很可能是错的）。您最好的选择可能是在任何需要渲染阴影的组件中调用 useColorMode 钩子。
同意，我刚刚做了一个带有阴影颜色的自定义钩子，我会在需要的地方使用它。

【解决方案2】：

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

【讨论】：