更改 chakra ui 中的暗模式颜色

Question

我正在使用Chakra UI 库提供的“暗模式”功能。但是，我不知道如何更改“暗模式”颜色。在文档中，我看到 Chakra UI 基于一种叫做“ styled-system ”的东西，所以我试图传递一个新的东西：themethemeProvider

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

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

然而，这没有用。我也试图modes用一个colors对象包裹这个对象，但这也不起作用。如何自定义“暗模式”颜色？

Answer 1

在最新版本的 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