更改脉轮中的黑暗模式颜色 ui

Question

我正在使用 "dark mode" feature provided by the Chakra UI library. However, I can't figure out how to change the "dark mode" colors. In the documentation, I see that Chakra UI is based on something called "styled-system"，所以我尝试将新的 theme 传递给 themeProvider，如下所示：

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

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

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

Answer 1

正如文档所说（并且它确实有效），您还需要用另一个 ColorModeProvider.

包装您的组件

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

并在你的组件中使用名为 useColorMode 的挂钩（如果你愿意，也可以嵌套）来获取当前颜色模式并在它们之间切换。

const { colorMode, toggleColorMode } = useColorMode();

Answer 2

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

更改脉轮中的黑暗模式颜色 ui

changing the dark mode color in chakra ui

chakra

reactjs