Question

我正在使用"dark mode" feature提供的Chakra UI library。但是，我不知道如何更改“暗模式”的颜色。在文档中，我看到Chakra UI基于名为“ styled-system”的东西，因此我试图像这样将新的theme传递给themeProvider：

const theme = {
  ...defaultTheme,
  modes: {
    dark: {
      background: '#000',
    },
  },
};

 <ThemeProvider theme={theme}></ThemeProvider>

但是，那没有用。我还尝试用modes对象包装colors对象，但这也不起作用。如何自定义“深色模式”颜色？

Answer 1

正如医生所说（它确实有效），您还需要用另一个 ColorModeProvider 包装您的组件。

 <ThemeProvider theme={customTheme}>
      <ColorModeProvider><YourCompoent/></ColorModeProvider>
 </ThemeProvider>

然后在组件内部使用一个称为 useColorMode 的钩子（如果需要，可以嵌套）以获取当前的颜色模式并在它们之间切换。

const { colorMode, toggleColorMode } = useColorMode();

Answer 2

在最新版本的chakra ui中，我们可以用这种方式覆盖颜色

import { mode } from '@chakra-ui/theme-tools';
import { extendTheme } from '@chakra-ui/core';

const styles = {
  global: props => ({
    body: {
      color: mode('gray.800', 'whiteAlpha.900')(props),
      bg: mode('gray.100', '#141214')(props),
    },
  }),
};

const components = {
  Drawer: {
    // setup light/dark mode component defaults
    baseStyle: props => ({
      dialog: {
        bg: mode('white', '#141214')(props),
      },
    }),
  },
};

const theme = extendTheme({
  components,
  styles,
});

export default theme;

然后我们将theme传递到ChakraProvider

在chakra ui中更改暗模式的颜色

2 个答案: